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;，这样只会将您的视频叠加在一起并将其封装在{{} 1}}

此处有一个fiddle，其中包含对您的CSS的更改

将HTML5视频元素覆盖在另一个视频元素上。

1 个答案: