javascript - 将 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的变化