Javascript HTML5视频如何在一个视频元素中播放两个视频

我试图在一个视频元素中播放两个不同的视频，但放置两个源只能播放第一个。 我应该用jQuery来做这件事吗？ 代码（HTML）：

---

正如我在评论中提到的，源列表不是一个播放列表，而是一组备选源。一旦浏览器找到一个受支持的，其余的将被忽略。你必须使用JavaScript来实现你想要的（独立于使用一两个视频标签）

在您提到的问题中，只有一个带有不同来源的

视频
标记，这里有一种可能性。其思路如下：


将事件侦听器添加到电影结尾
视频完成后，将
视频
src更改为下一个
源
的src
请注意，此解决方案考虑支持所有源视频

在JavaScript中，应该是这样的：


var myvid=document.getElementById（'myvideo'）；
myvid.addEventListener（'ended'，函数（e）{
//获取活动源和下一个视频源。
//我设置它，如果没有下一个，它将循环到第一个
var activesource=document.querySelector（“myvideo source.active”）；
var nextsource=document.querySelector（“myvideo source.active+source”）| | document.querySelector（“myvideo source:first child”）；
//停用当前电源，然后激活下一个电源
activesource.className=“”；
nextsource.className=“活动”；
//更新视频源并播放
myvid.src=nextsource.src；
myvid.play（）；
});

为什么您需要将其放在一个视频标签中？什么时候不能使用2个标签？我希望视频成为页面的背景。所以我不想让两个视频在一起，但。。创建2个视频，将它们的位置设置为
绝对
，并将它们放置在您想要的任何位置。因此使用JavaScript:
firstVideo.addEventListener（'ended'，function（）{secondVideo.play（），false）；
源列表不是播放列表，而是一组可供选择的源。一旦浏览器找到一个受支持的源，其余的源将被忽略。你必须使用JavaScript来实现你想要的（独立于使用一个或两个
视频
标记）。将URL保留在一个数组中并进行迭代，而不使用非预期/非工作代码和不必要的DOM操作填充html源代码，不是会简单得多吗？这会简单得多。我试图坚持问题中的代码，但我会添加一些这样做的代码。我只需要注释，因为我喜欢你的%array.length技巧循环！嘿，我想以一种反应的方式完成这个片段。有人对如何有效地修改它有什么建议吗？@Alvarontoro当第一个片段结束时，它停止了一段时间以加载下一个片段。我想消除它并流畅地播放多个视频。
<video autoplay loop id="bbgVid">
<source src="style/mpVideos/mpv1.mp4" type="video/mp4">
<source src="style/mpVideos/mpv2.mp4" type="video/mp4">
</video>