Javascript 在堆栈中加载视频元素之间存在明显的延迟

我正在开发一个小规模的应用程序，使用视频播放器组件以多种方式显示视频。 目前我正在实现一个堆栈列表，它是一个包含视频堆栈组件的容器，每个堆栈包含一个或多个视频播放器组件

虽然正确的视频是从DOM加载的，但存在明显的几秒钟延迟（就键盘响应而言），这似乎与当前播放的视频的结束和获取堆栈中的下一个视频有关

我怎样才能摆脱这种滞后？可以通过鼠标悬停或WASD键盘命令（A:previous，D:next）切换/选择视频，延迟可能会导致注册键盘输入延迟

video-stack.hbs

{{video-player highlightedStyle=(string-append stackStyle borderStyle)
looping=(is-single-video videos) videoPos=selectedVidPos 
isMuted=(if (video-selected key selectedStackIndex) isMuted true) 
url=(if curVideo.teaser.isUrl curVideo.teaser.fileIdentifier 
(make-local-url modelIdentifier curVideo.teaser.fileIdentifier)) 
onClickCallback=(action 'stackClicked') 
onHoverCallback=(action 'stackHovered')
onEndedCallback=(action 'getNextVid')}}

video-stack.js

import Ember from 'ember';

export default Ember.Component.extend({
selectedVidPos: 0,
selectedStackIndex: 0,
stackStyle: '',
playerSize: '',
isMuted: true,

init() {
    this._super(...arguments);

    switch(this.get('videos').length){
        case 1:
            break;
        case 2:
            this.set('stackStyle', 'vid-shadows--2');
            break;
        case 3:
            this.set('stackStyle', 'vid-shadows--3');
            break;
        case 4:
            this.set('stackStyle', 'vid-shadows--4');
            break;
        default:
            this.set('stackStyle', 'vid-shadows--4');
            break;
    }
},
curVideo: Ember.computed('videos', 'selectedVidPos', function () {
    return this.get('videos')[this.get('selectedVidPos')];
}),
actions: {
    stackClicked() {
        this.get('onClickCallback') (this.get('videos'),      this.get('selectedVidPos'));

    },
    getNextVid() {
        let arrayLength = this.get('videos').length;
//check if there is only 1 video in the stack
        if (arrayLength === 1) {
            return;
        }
        let curArrayPos = parseInt(this.get('selectedVidPos'));
        this.set('selectedVidPos', (curArrayPos + 1) % arrayLength);
    },
    stackHovered() {
        this.get('onHoverCallback') (this.get('videos'), this.get('selectedStackIndex'));
    }
}
});

export default Ember.Component.extend({
selectedVidAPos: 0,
selectedVidBPos: 0,
selectedStackIndex: 0,
stackStyle: '',
playerSize: '',
isMuted: true,
showVidA: true,

init() {
    ...
    }
},
videoA: Ember.computed('videos', 'selectedVidAPos', function () {
    return this.get('videos')[this.get('selectedVidAPos')];
}),
videoB: Ember.computed('videos', 'selectedVidBPos', function () {
    return this.get('videos')[this.get('selectedVidBPos')];
}),
actions: {
    stackClicked() {
        this.get('onClickCallback') (this.get('videos'), (this.get('showVidA') ? this.get('selectedVidAPos') : this.get('selectedVidBPos')));
    },
    getNextVideoA() {
        let arrayLength = this.get('videos').length;
        if (arrayLength === 1) {
            return;
        }
        let curArrayPos = parseInt(this.get('selectedVidAPos'));
        this.set('selectedVidAPos', (curArrayPos + 2) % arrayLength);
        this.set('showVidA', false);        
    },
    getNextVideoB(){
        let arrayLength = this.get('videos').length;
        if (arrayLength === 1) {
            return;
        }
        let curArrayPos = parseInt(this.get('selectedVidBPos'));
        this.set('selectedVidBPos', (curArrayPos + 2) % arrayLength);
        this.set('showVidA', true);
    },

    stackHovered() {
        this.get('onHoverCallback') (this.get('videos'), this.get('selectedStackIndex'));
    }
}
});

视频播放器.hbs

<video oncanplay={{action 'play'}} looping=true 
onended={{action 'ended'}} src={{url}} 
class="video-player__video {{highlightedStyle}} {{if playing '' 'video-
player__darken'}}" muted={{muted}} />

---

我可以发布更多的代码，如果它有助于揭示罪犯，谢谢

我发现了滞后的罪魁祸首。问题出在父容器content-area.js中，该容器的resetTimeout操作被错误调用，导致焦点不必要地循环，从而导致延迟

在video-stack.js中还实现了一个关闭渲染视频的功能，以确保从一个视频平滑加载到下一个视频。现在有两个视频对象a和B，它们从blob对象中获取和预加载，一个显示，另一个隐藏。一旦显示的视频结束，它们交换出去，然后加载堆栈中的下一个视频

video-stack.js

import Ember from 'ember';

export default Ember.Component.extend({
selectedVidPos: 0,
selectedStackIndex: 0,
stackStyle: '',
playerSize: '',
isMuted: true,

init() {
    this._super(...arguments);

    switch(this.get('videos').length){
        case 1:
            break;
        case 2:
            this.set('stackStyle', 'vid-shadows--2');
            break;
        case 3:
            this.set('stackStyle', 'vid-shadows--3');
            break;
        case 4:
            this.set('stackStyle', 'vid-shadows--4');
            break;
        default:
            this.set('stackStyle', 'vid-shadows--4');
            break;
    }
},
curVideo: Ember.computed('videos', 'selectedVidPos', function () {
    return this.get('videos')[this.get('selectedVidPos')];
}),
actions: {
    stackClicked() {
        this.get('onClickCallback') (this.get('videos'),      this.get('selectedVidPos'));

    },
    getNextVid() {
        let arrayLength = this.get('videos').length;
//check if there is only 1 video in the stack
        if (arrayLength === 1) {
            return;
        }
        let curArrayPos = parseInt(this.get('selectedVidPos'));
        this.set('selectedVidPos', (curArrayPos + 1) % arrayLength);
    },
    stackHovered() {
        this.get('onHoverCallback') (this.get('videos'), this.get('selectedStackIndex'));
    }
}
});

export default Ember.Component.extend({
selectedVidAPos: 0,
selectedVidBPos: 0,
selectedStackIndex: 0,
stackStyle: '',
playerSize: '',
isMuted: true,
showVidA: true,

init() {
    ...
    }
},
videoA: Ember.computed('videos', 'selectedVidAPos', function () {
    return this.get('videos')[this.get('selectedVidAPos')];
}),
videoB: Ember.computed('videos', 'selectedVidBPos', function () {
    return this.get('videos')[this.get('selectedVidBPos')];
}),
actions: {
    stackClicked() {
        this.get('onClickCallback') (this.get('videos'), (this.get('showVidA') ? this.get('selectedVidAPos') : this.get('selectedVidBPos')));
    },
    getNextVideoA() {
        let arrayLength = this.get('videos').length;
        if (arrayLength === 1) {
            return;
        }
        let curArrayPos = parseInt(this.get('selectedVidAPos'));
        this.set('selectedVidAPos', (curArrayPos + 2) % arrayLength);
        this.set('showVidA', false);        
    },
    getNextVideoB(){
        let arrayLength = this.get('videos').length;
        if (arrayLength === 1) {
            return;
        }
        let curArrayPos = parseInt(this.get('selectedVidBPos'));
        this.set('selectedVidBPos', (curArrayPos + 2) % arrayLength);
        this.set('showVidA', true);
    },

    stackHovered() {
        this.get('onHoverCallback') (this.get('videos'), this.get('selectedStackIndex'));
    }
}
});

content-area.js

import Ember from 'ember';
import KeyboardControls from '../mixins/keyboard-controls';

export default Ember.Component.extend(KeyboardControls, {
displayVideoSelect: false,
displayVideoSelectTimeout: null,
displayVideo: false,
video: null,
videoPlaying: false,
keyboard: null,
backgroundVideoPos: 0,
backgroundVideoUrl: null,
backgroundVideoKeys: null,
selectionVideos: [],
stackListData: null,

showVideoSelect: function() {
  this.set('displayVideoSelect', true);
  this.send('resetTimeout');
},
hideVideoSelect: function() {
  this.set('displayVideoSelect', false);
  clearTimeout(this.get('displayVideoSelectTimeout'));
},
pauseVideo: function() {
  this.set('videoPlaying', !this.get('videoPlaying'));
  this.set('displayVideoSelect', !this.get('videoPlaying'));
  this.set('focus', this.get('videoPlaying'));
},
select: function() {
  this.set('videoPlaying', false);
  this.set('focus', false);
  this.showVideoSelect();
  this.send('resetTimeout');
},
cancel: function() {
  this.pauseVideo();
  this.send('resetTimeout');
},
goNext: function() {
  this.pauseVideo();
  this.send('resetTimeout');
},
goPrevious: function() {
  this.pauseVideo();
  this.send('resetTimeout');
},
updateFocus: function(param) {
if (param) {
  this.$().attr('tabindex', 2);
  this.$().focus();
}//if
else {
  this.$().attr('tabindex', -2);
  this.$().blur();
}//else
},

init() {
...
},

click() {
  this.set('focus', false);
  this.showVideoSelect();
},
actions: {
  videoSelected(sender, videoData) {
    ...
  },
  videoEnded() {
    this.set('focus', false);
    this.showVideoSelect();
    this.set('displayVideo', false);
  },
  cycleBackground() {
    ...
  },
  cancelPressed() {
    this.cancel();
  },
  resetTimeout() {
    let component = this;
    clearTimeout(this.get('displayVideoSelectTimeout'));

    let timeout = setTimeout(() => {
                  component.hideVideoSelect();
                  //This set command was responsible for the lag
                  component.set('focus', true);
                  }, this.get('data.config.ui.idle') * 1000);
    this.set('displayVideoSelectTimeout', timeout);
    }
  }
});

看见