如何在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

问题是视频正在显示absolutely。你可以让你的链接有position: absolute，这样就可以了。