14

是否可以在 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>

小提琴

4

2 回答 2

5

我在这里假设您希望您的 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-Browser V6.1.2015.1007（目前为最新版本）上测试，效果很好。

编辑2：

控件没有隐藏在 UC-Browser 中，通过添加 z-index 将其固定在 css 中。

编辑3：

我在 video 标签上添加了 autoplay 属性，以便在播放模式下查看它的工作情况。

于 2017-03-24T11:02:29.590 回答
0

这个怎么样：
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'
于 2017-03-30T21:58:42.367 回答