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代码段会自动将您的视频src更改为阵列中的下一个。

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

希望这有帮助！

视频背景仅播放1个视频

1 个答案: