html - 如何使用 video.js 背靠背播放视频

Question

我video.js用来在 Vue.js 应用程序中播放一些视频。目标是能够播放一个视频，然后播放两个较小的视频（通常是广告），这些视频可能会随着时间而变化。为了使事情更容易换出，而不是有一个主要内容的长视频，然后是两个广告都烘焙到同一个 .mp4 中，我们希望简单地背靠背播放三个视频，主要视频然后两个广告。但是，尽可能让它们看起来像是一个长视频。

我目前正在通过这样做在某种程度上实现这一目标：

<video id="my-video" preload="auto" class="video-js vjs-big-play-centered"
    controls poster="http://server.com/main.png">
    <source src="http://server.com/main.mp4" type="video/mp4">
</video>

window.videojs('my-video', function() {
    self.vjsVideo = this;
    let mode = 0;

    this.on('ended', () => {
        if (mode === 0) {
            // after main is done, play ad 1
            self.vjsVideo.src('http://server.com/ad1.mp4');
            self.vjsVideo.poster('img/ad1.png');
            self.vjsVideo.play();
            mode = 1;
        }
        else if (mode === 1) {
            // after ad 1 is done, play ad 2
            self.vjsVideo.src('http://server.com/ad2.mp4');
            self.vjsVideo.poster('img/ad2.png');
            self.vjsVideo.play();
            mode = 2;
        }
        else if (mode === 2) {
            // after ad 2 is done, go back to main content, but do not auto-play
            self.vjsVideo.src('http://server.com/main.mp4');
            self.vjsVideo.poster('http://server.com/main.png');
            mode = 0;
        }
    });
});

这样就完成了工作，但经验还有一些不足之处。视频播放器闪烁黑色，控件来来去去。它不像我想要的那样无缝。包括preload="auto"在<video>标签上会有所帮助，但我想知道是否有其他技术可以使用以使其更好地工作。

标签： htmlvideovideo.js