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

我想覆盖2个视频元素，其中一个直接位于另一个之上。很明显，顶部的一个比另一个小，这样两者都可见。到目前为止，我唯一能够找到的东西是将文本叠加在视频上，但大多数情况下，我所看到的示例都使用距离页面顶部的硬编码距离来实现此目的。将HTML5视频元素叠加到另一个视频元素上。

这是我曾尝试：

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个视频，甚至在另一个视频中嵌套视频？

来源

2015-04-03 puopg

尝试使用css z-index属性。 – stanze 2015-04-03 05:09:21

你需要做的是设置.video-container到position: relative;，然后使这两个视频position: absolute;这将完全覆盖在彼此的顶部您的视频和.video-container

这里它们封装什么是与改变一个fiddle您css

来源

2015-04-03 05:14:22 Charbz

与z-index一起，这是我需要的。谢谢！ – puopg 2015-04-04 16:44:59

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

回答

相关问题