css - 在 UC 浏览器中重叠 div over html5 视频播放器问题

Question

是否可以在 UC 浏览器中将 div 元素重叠在 HTML5 视频播放器上。

<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>

fiddle

Answer 1

我假设您希望您的 div 与您的视频大小相同。 This thread有一个很好的答案给你。

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:

我在视频标签上添加了自动播放属性，以查看它在播放模式下的工作情况。