javascript - 播放多个视频

Question

我想显示图像，直到背景视频完全加载，然后播放它。当视频结束时，我想显示另一张图片，再次显示该图片，直到加载第二个视频。

知道如何实现这一目标吗？

<video autoplay="autoplay" id="video">
  <source src="1.mp4"></source>
</video>

#video
{
position: absolute; right: 0; bottom: 0;
min-width: 100%; min-height: 600px;
width: auto; height: auto; z-index: -100;
background: url(1.jpg) no-repeat;
}

Answer 1

我会做这样的事情:

<video autoplay="autoplay" id="video">
  <source src="1.mp4"></source>
</video>

#video
{
    position: absolute; right: 0; bottom: 0;
    min-width: 100%; min-height: 600px;
    width: auto; height: auto; z-index: -100;
    background: url(1.jpg) no-repeat;
}

Javascript:

// Your video object
var video = document.getElementsById('video');

video.onreadystatechange = function(e){
    // Ready state 4 means that the video has loaded
    if (video.readyState === 4) {
        // It is loaded
        // Remove the loading image:
        $('#video').css('background', '');
    }
};


video.onended = function(e) {
    // The video has ended
    // Add the next loading image:
    $('#video').css('background', 'url(your_next_image) no-repeat');
    // Change the video:
    $('#video source').attr('src', '...your next video...');
};

你也许可以从那里开始。 :)

(来源: This answer 检查您的视频是否已加载，并 this answer 了解视频何时结束。)