如何在HTML5中制作2个视频重叠?

时间:2015-06-18 17:28:11

标签: javascript html5 html5-canvas html5-video

我想将1个HTML5视频与另一个视频重叠?基本上我想在我的背景视频上添加一个移动物体(一个视频)。请帮助我实现这一目标。 谢谢!

2 个答案:

答案 0 :(得分:1)

在过去的几天里,我一直在努力解决类似的问题,虽然我不能确切地告诉你如何做到这一点,但我可以分享我所学到的知识,希望能给你一个更好的起点。
HTML5视频和HTML5画布元素现在彼此之间有一些有趣的交互,因为您可以使用drawimage()方法将视频绘制到画布元素上,并将HTML5视频元素作为源。

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

查看有关HTML5视频操作的本教程here
查看将HTML5视频(以及其他内容)放在另一个视频here

上的演示

希望这有助于

答案 1 :(得分:0)

一个简单的解决方案是在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 }