如何在HTML5全屏視頻上顯示DIV？

Question

我現在的最終目標是在視頻播放結束時在視頻頂部顯示一個鏈接。 使用JW播放器功能我已確定如何在視頻完成時顯示鏈接但僅在標准視圖中顯示。 如果用戶以全屏方式查看視頻，則不會顯示該鏈接。 我已經做了大量閱讀並理解，當它處於全屏模式時，視頻處於閃存狀態，如果不將鏈接集成到swf文件中，我無法覆蓋閃存功能，我不想這樣做。

我所做的是使用皮膚刪除JW Player視頻播放器中的全屏按鈕。 然后我創建了一個按鈕，使用HTML5全屏功能全屏顯示視頻。 （我知道IE不適用於此......現在沒問題）。 我還可以創建一個全屏狀態更改事件偵聽器，以便我的鏈接顯示在視頻的頂部。 但它不起作用。

無論我如何設置保存鏈接的DIV，它都不會出現在視頻的頂部。

有人能指出我正確的方向嗎？

感謝任何人都能給我的幫助。

代碼示例：

#container{
       position:relative;
   z-index:0;
}

#overlay {
   visibility:hidden; 
   width: 700px; 
   height:50px; 
   color:#FFF; 
   position: absolute; 
   top: 532px; 
   margin:8px; 
   padding:5px; 
   background-color:#000;   
   text-align:center;
}

#overlayfullscreen{
   visibility:hidden;
   text-align:center;
   color:#FFF;
   font-size:26px;
   z-index: 1000;
   position: absolute;          
   top: 800px;
   margin:8px; 
   padding:5px; 
   overlay:hidden;          
}



<div id="container">
    Loading the player, if not working please update your browser.
</div>                      

<button onClick="goFullscreen('container'); return false">Click for Fullscreen</button>





var path = '<?php echo $video_path ?>';

jwplayer("container").setup(
{
autostart: <?php echo $autostart ?>,        
file: "<?php echo $full_video_path ?>",                                 
height: <?php echo $height ?>,
width: <?php echo $width ?>,
skin: '<?php echo $skin ?>',

events: {
    onComplete: function(){
         document.getElementById('overlay').style.visibility = 'visible';                                       
      }                                 
    }                                   
});

document.addEventListener("mozfullscreenchange", function () 
{                                   
document.getElementById('overlayfullscreen').style.visibility = 'visible';              
}, false);

Answer 1

這是一個簡單的技巧，您需要將z-index的最大值（z-index：2147483647;）添加到overlay元素中。 這個技巧將解決你的問題。

z-index: 2147483647;

這是你的更新小提琴： http ： //jsfiddle.net/TcpX5/36/

Answer 2

我已經設置了一個小型演示，我使用的是HTML5視頻，而不是Flash Player，但行為應該是相同的： http ： //jsfiddle.net/sandro_paganotti/TcpX5/

要切換全屏我建議使用screenfull（ https://github.com/sindresorhus/screenfull.js ），它基本上處理Firefox和Chrome之間的細微差別。

這是代碼，只需用您的JW Player實現替換<video>元素：

HTML

<div id="video">
    <video width="100%" src="yourmovie.webm" controls></video><br/>
    <button>go full screen</button>
    <a href="#">Special link</a>
</div>

CSS

#video{ position: relative; }
a{  position: absolute; top: 10px; right: 10px;
    border: 1px solid red; display: block; background: #FFF } 

使用Javascript

$('button').click(function(){
    screenfull.request();
});

最后一點：jsfiddle禁止全屏模式（來源： https ：//webapps.stackexchange.com/questions/26730/can-full-screen-mode-be-activated-in-jsfiddle）看你必須手動演示使用上面鏈接中指定的chrome devtools或firebug調整jsfiddle iframe。

Answer 3

問題是視頻是absolutely顯示的。 你可以讓你的鏈接有position: absolute ，那應該這樣做。