如何始終保留HTML5視頻的div？

Question

基本上我需要在我的HTML 5視頻上疊加一個div。

我谷歌搜索，並發現解決方案將設置div z-index值最大。所以，我做到了，但問題出在Firefox上。當視頻在Firefox中全屏顯示時，我的div在視頻下面沒有超過它。

http://codepen.io/anon/pen/GNaEKL我已經創建了這個鏈接，你可以在Firefox中測試它，並點擊它中的綠色框並自己查看結果。

var video_con=document.getElementById("video_container"); 
 
\t \t \t \t 
 
document.getElementById("flscrn").addEventListener("click",function(){ 
 
    alert("hi"); 
 
    if (video_con.requestFullscreen) { 
 
\t \t \t video_con.requestFullscreen(); 
 
\t } else if (video_con.mozRequestFullScreen) { 
 
\t  \t video_con.mozRequestFullScreen(); 
 
\t } else if (video_con.webkitRequestFullscreen) { 
 
\t \t \t video_con.webkitRequestFullscreen(); 
 
\t } 
 
});

.pofvv{ 
 
\t position:relative; 
 
\t width:100%; 
 
\t height:100%; 
 
\t background:black; 
 
\t z-index:1; 
 
} 
 
.vid{ 
 
\t position:absolute; 
 
\t height:60px; 
 
\t width:100%; 
 
\t bottom:0px; 
 
    top:50%; 
 
\t background: white; 
 
    \t z-index:2147483647; 
 
} 
 
.flscrn{ 
 
    position:absolute; 
 
    height:30px; 
 
    width:130px; 
 
    background:green; 
 
    color:white; 
 
    text-align:center; 
 
}

<div class="video_container"> 
 
    <video class="pofvv" id="pofvv" controls> 
 
    <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4"> 
 
    </video> 
 
    <div class="vid"> 
 
     <div class="flscrn" id="flscrn"> full screen </div> 
 
    </div> 
 
</div>

Answer 1

您需要使用H.264編碼的視頻。現在視頻不是由Firefox提供的。

Answer 2

經過在這個問題上浪費了我生命中的幾天之後，我發現沒有功能在firefox中覆蓋完整屏幕視頻的一個元素（原因是：他們的員工不關心那裏的公司）。

但我們可以做的是請求包含視頻的div全屏，然後我們可以覆蓋該視頻上的任何元素。

var video_con = document.getElementById("div_containing_video"); 

$('.enter_fullscreen_btn').click(function(){ 
    if (video_con.requestFullscreen) { 
     video_con.requestFullscreen(); 
    } else if (video_con.mozRequestFullScreen) { 
     video_con.mozRequestFullScreen(); 
    } else if (video_con.webkitRequestFullscreen) { 
     video_con.webkitRequestFullscreen(); 
    } 
}); 

$('.exit_fullscreen_btn').click(function(){ 
    if (document.exitFullscreen) { 
     document.exitFullscreen(); 
    } else if (document.mozCancelFullScreen) { 
     document.mozCancelFullScreen(); 
    } else if (document.webkitCancelFullScreen) { 
     document.webkitCancelFullScreen(); 
    } 
});