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>很有帮助，但我想知道是否还有其他技术可以使它工作得更好。

如何使用video.js播放视频

0 个答案: