UCブラウザでのhtml5ビデオプレーヤーのオーバーラップdiv

Question

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> 

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がビデオ上で重なっていることがわかります。

EDIT：

は、UC-ブラウザV6.1.2015.1007（今の最新のリリース）でテストし、それだけで正常に動作します。

EDIT2：

コントロールは、Zインデックスを追加することによって、UC-ブラウザで隠されたCSSでそれを修正しませんでした。

EDIT3：

私は、プレイモード中に、それが動作確認するためにvideoタグで自動再生属性を追加しました。

Answer 2

これはどう：
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'