是否可以在UC浏览器中的HTML5视频播放器上重叠div元素。
<div class="test">
<div class="goover"></div>
<video width="400" controls>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">`
Your browser does not support HTML5 video.
</video>
</div>
小提琴
我假设在这里您希望您的div与视频大小相同。这个线程有一个很好的答案给你。
setInterval(function() {
var width = $("#vid").width();
var height = $("#vid").height();
$(".goover").css({
'width': width,
'height': height
});
}, 10);
.test{
position:relative
}
.goover{
width: 2px;
height: 2px;
border: solid 2px red;
background: rgba(255,0,0,0.8);
position: absolute;
z-index: 10;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">
<div class="goover"></div>
<video width="400" id="vid" controls autoplay>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
我稍微修改了一下片段以更好地匹配您的片段。我还在红色背景中放了一点透明度,这样你可以看到div 在视频上重叠。
编辑:
在UC浏览器V6.1.2015.1007(目前最新版本)上进行了测试,它工作正常。
编辑2 :
这些控件没有隐藏在UC浏览器中,通过添加z索引在css中修复了它。
编辑3 :
我在视频标签上添加了自动播放属性,以查看它在播放模式下的工作情况。
这个怎么样:
https://jsfiddle.net/zpjsz8g8/1/
.test { position: relative }
.goover {
position: absolute;
background: #ff0000;
top: 0;
bottom: 0;
left: 0;
/*right:0px*/
width: 400 px;
z - index: 1;
}
或
var videoContainer = document.getElementsByTagName('video')[0];
var goover = document.getElementsByClassName('goover')[0];
goover.style.height = videoContainer.getBoundingClientRect().height + 'px';
goover.style.width = videoContainer.getBoundingClientRect().width + 'px'