如何在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 ，那应该这样做。