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知道视频何时结束。）

Answer 2

HTML：

<video id="video" controls autoplay></video>

JavaScript的：

var xhr = new XMLHttpRequest();
xhr.open('GET', '/*url video*/', true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
  if (this.status === 200) {
    var myBlob = this.response;
    var vid = (window.webkitURL ? webkitURL : URL).createObjectURL(myBlob);
    var video = document.getElementById("video");
    video.src = vid;
       /*here you can do what ever you want*/
   }
  }
xhr.send();

缺点：视频的来源必须具有control-access-allow-origin：＆＃39; *＆＃39;

播放多个视频

2 个答案: