如何使 HTML5 中的 2 个视频重叠？ [关闭]答案

【问题标题】：How to make 2 videos in HTML5 overlap? [closed]如何使 HTML5 中的 2 个视频重叠？ [关闭]
【发布时间】：2015-06-18 17:28:11
【问题描述】：

我想让 1 个 HTML5 视频与另一个视频重叠？基本上我想在我的背景视频上添加一个移动对象（视频）。请帮助我实现这一目标。谢谢！

【问题讨论】：

标签： javascript html html5-canvas html5-video

【解决方案1】：

在过去的几天里，我自己也一直在努力解决类似的问题，虽然我无法告诉你具体的操作方法，但我可以分享我所学到的知识，希望能给你一个更好的起点。
HTML5 视频和 HTML5 画布元素之间现在有一些有趣的交互，因为您可以使用以 HTML5 视频元素为源的drawimage() 方法获取视频并将它们绘制到画布元素上。

要重叠视频，您可以创建一个画布元素并使用drawimage() 将两个视频都绘制到画布上。

查看有关 HTML5 视频处理的教程here
查看将 HTML5 视频（以及其他内容）置于另一个视频之上的演示 here

希望对你有帮助

【讨论】：

【解决方案2】：

一个简单的解决方案是在 css 中定义不同的 z-index 值。

HTML

<video class="video-one"> ...</video>
<video class="video-two"> ...</video>

CSS，第二个视频与第一个重叠。

.video-one { z-index: 1 } /* optional */
.video-two { z-index: 2 }

【讨论】：