文章/答案/技术大牛

发布

社区首页 >问答首页 >UC浏览器中html5视频播放器问题的重叠div

问UC浏览器中html5视频播放器问题的重叠div
EN

Stack Overflow用户

提问于 2016-04-27 19:28:51

回答 2查看 2.5K关注 0票数 14

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

html

uc-browser

css

回答 2

Stack Overflow用户

发布于 2017-03-24 19:02:30

我假设你想让你的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 (目前的最新版本)上测试，它工作正常。

EDIT2 :

这些控件在UC-Browser中没有隐藏，在css中通过添加z索引修复了它。

EDIT3 :

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

票数 5

Stack Overflow用户

发布于 2017-03-31 05:58:42

这样如何：

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'

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/36888470

复制

相似问题

问UC浏览器中html5视频播放器问题的重叠div
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问UC浏览器中html5视频播放器问题的重叠divEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问UC浏览器中html5视频播放器问题的重叠div
EN