将 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 的更改