将 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

这是对您的 css 的更改的小提琴