将 HTML5 视频元素叠加到另一个视频元素上。

Question

我正在尝试叠加 2 个视频元素，其中一个直接位于另一个之上。显然，顶部的一个会比另一个小，这样两者都可见。到目前为止，我唯一能找到的是在视频上叠加文本，但大多数时候我看到的示例使用与页面顶部的硬编码距离来实现这一点。

这是我尝试过的方法：

HTML:

<div class='video-container'>
   <video class='userVideo' id="localVideo" autoplay></video>
   <video class='peerVideo' id='peerVideo' autoplay></video>
</div>

CSS:

.userVideo {
    height: 200px;
    width: 200px;
    float: left;
    border:5px solid orange;
    position: absolute; 
    top: 100px; 
}

.peerVideo {
    height: 200px;
    width: 200px;
    border:5px solid blue;
}

到目前为止，我唯一能够实现的是文本 div 与单个视频重叠。有没有办法重叠 2 个视频，甚至将一个视频嵌套在另一个视频中？

Answer 1

您需要做的是将 .video-container 设置为 position: relative;，然后制作两个视频 position: absolute; 这将简单地将您的视频叠加在一起并将它们封装在.video-container

这里是 fiddle，其中包含对 css

所做的更改

将 HTML5 视频元素叠加到另一个视频元素上。

Overlaying an HTML5 video element over another video element.

html

javascript

css

video