html - 视频背景仅播放1个视频

Question

我正在组建一个网站，并且实现了全屏视频背景。问题是我无法让它播放下一个视频。它只播放它看到的第一个视频。我尝试过其他视频格式，但没有成功。请帮忙!

/*CSS*/

video#full-screen {
            position: absolute; 
            right: 0; 
            bottom: 0;
            min-width: 100%;
            min-height: 100%; 
            width: auto; 
            height: auto; 
            z-index: -1; 
            filter: hue(100%);
            }

<!--HTML-->

<video playsinline autoplay muted loop poster="assets/Logo.png" id="full-screen">
            <source src="video/home-video.webm" type="video/webm"/>
            <source src="video/home-video.mp4" type="video/mp4"/>
    </video>

Answer 1

来源列表不是播放列表，而是一组替代来源。一旦浏览器找到一个受支持的，其余的将被忽略。您必须使用 JavaScript 来实现您想要的(独立于使用一个或两个视频标签来实现)。

您可以在 JavaScript 数组中获取视频列表，并相应地更新视频源，而不是直接在视频下使用多个源:

在您的脚本标记中添加以下内容，它应该适合您。

var myvid = document.getElementById('full-screen');
var myvids = [
  "http://www.w3schools.com/html/mov_bbb.mp4", 
  "http://www.w3schools.com/html/movie.mp4"
  ];
   //replace this array with the videos you would like to play next

var activeVideo = 0;

myvid.addEventListener('ended', function(e) {
  // update the new active video index
  activeVideo = (++activeVideo) % myvids.length;

  // update the video source and play
  myvid.src = myvids[activeVideo];
  myvid.play();
});

此 JavaScript 代码段会自动将您的视频源更改为数组中的下一个。

您可以在这个 JSFiddle 上看到这个工作 - http://jsfiddle.net/2976jx1s/

希望这对您有所帮助!