视频背景仅播放 1 个视频答案

【问题标题】：Video Background Only Playing 1 Video视频背景仅播放 1 个视频
【发布时间】：2016-11-11 16:23:02
【问题描述】：

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

/*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>

【问题讨论】：

请附上有关您如何更改视频源的相关代码...
无代码，我只是使用在线转换器更改视频格式。 online-convert.com
我仍然看不到下一个视频....例如，在您的示例中，您有两个视频源（基本上是具有不同扩展名的相同视频），例如，这是为了浏览器兼容性，如果 chrome 支持 webm，它会播放第一个来源...如果您在不支持 webm 的旧版本 Firefox 上打开您的网站，那么它会播放 mp4 文件....就是这样....
我希望在浏览器中播放这两个视频。我希望它是一个连续的循环。播放一个视频，然后播放下一个。 motorwerks.com
slicejack.com/fullscreen-html5-video-background-css

标签： html css loops video background

【解决方案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 sn-p 会自动将您的视频 src 更改为数组中的下一个。

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

希望这会有所帮助！

【讨论】：

嘿 Rohin，谢谢你的帮助！我所做的是下载一个视频合并应用程序，将我的视频剪辑合并到一个视频文件中。现在我的 css 方法运行良好。感谢您的想法，非常感谢您的帮助！