UC tarayıcısında html5 video oynatıcısı sorunu üzerine div overlay

Question

Bu, HTML tarayıcısı üzerinden UC tarayıcısında div öğesinin üstesinden gelmek mümkün mü?

<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

ben size div videonuza aynı boyutta olmasını istediğiniz burada varsayalım. This thread sizin için oldukça hoş bir cevabı var.

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>

Ben seninki daha maç için Snippet biraz modifiye. Ve ayrıca kırmızı arka planda bir miktar saydamlık ekledim, böylece div'un video üzerinden örtüştüğünü görebilirsiniz.

DÜZENLEME:

(şimdilik son sürümü) UC-Tarayıcı V6.1.2015.1007 üzerinde test ve gayet güzel çalışıyor.

EDIT2:

kontrolleri z-index ekleyerek, UC-Tarayıcıda gizli css bunu sabit değildi.

EDIT3: Ben video etiketi üzerinde autoplay özelliğini ekledik

o oyun modundayken çalışırken görmek.

Answer 2

nasıl bu konuda:
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; 
} 

veya

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'