如何在 HTML5 中使 2 个视频重叠

How to make 2 videos in HTML5 overlap?

本文关键字：视频 重叠 中使 HTML5      更新时间：2023-09-26

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

在过去的几天里，我自己一直在为类似的问题而苦苦挣扎，虽然我不能确切地告诉你该怎么做，但我可以分享我学到的东西，希望能给你一个更好的起点。
HTML5 视频和 HTML5 画布元素现在彼此之间有一些有趣的交互，因为您可以使用 drawimage() 方法将它们绘制到画布元素上，并将 HTML5 Video 元素作为源。

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

在此处
查看有关HTML5视频操作的教程在此处查看将HTML5视频（以及其他内容）放在另一个视频之上的演示

希望这有帮助

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

.HTML

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

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

.video-one { z-index: 1 } /* optional */
.video-two { z-index: 2 }
相关文章：