css – 如何在HTML5全屏视频上显示DIV？

我现在的最终目标是在视频到达结束时在视频顶部显示一个链接.使用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);

解决方法

问题是视频是绝对显示的.你可以让你的链接有位置：绝对,那应该这样做.

原文地址：https://www.jb51.cc/css/217600.html