如何在HTML5全屏视频之上制作DIV？ [英] How do I make a DIV visible on top of an HTML5 fullscreen video?

问题描述

我现在的最终目标是在视频结束时在视频顶部显示链接。使用JW播放器功能，我已确定如何在视频完成时显示链接，但仅在标准视图中显示。如果用户以全屏观看视频，则链接不会出现。我已经做了大量的阅读和理解，当它处于全屏模式时，视频是闪光的，我不能在不把链接集成到swf文件的情况下重写flash函数，我不想这样做。

我所做的是使用皮肤删除JW Player视频播放器中的全屏按钮。然后，我创建了一个按钮，使用HTML5全屏功能以全屏方式显示视频。 （据我所知，IE不能用于这个......现在很好）。我也能够创建一个全屏状态更改事件监听器，以便我的链接将出现在视频顶部。但它无效。

无论我如何设计链接的DIV，它都不会出现在视频的顶部。

有人能指点我吗？

感谢任何人的帮助。

代码示例：

  #container {
 position：relative; 
 z-index：0; 
} 
 
 #overlay {
 visibility：hidden; 
 width：700px; 
身高：50px; 
颜色：#FFF; 
仓位：绝对; 
 top：532px; 
保证金：8px; 
 padding：5px; 
 background-color：＃000; 
 text-align：center; 
} 
 
 #overlayfullscreen {
 visibility：hidden; 
 text-align：center; 
颜色：#FFF; 
 font-size：26px; 
 z-index：1000; 
位置：绝对; 
 top：800px; 
保证金：8px; 
填充：5px; 
叠加：隐藏; 
} 
 
 
 
< div id =container> 
加载播放器，如果不能正常工作，请更新您的浏览器。 
< / 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？>'，
 
事件：{
 onComplete：function（）{
 document.getElementById（'overlay'）。style.visibility ='可见'; 
} 
} 
}）; 
 
 document.addEventListener（mozfullscreenchange，function（）
 {
 document.getElementById（'overlayfullscreen'）。style.visibility ='visible'; 
} ，假）; 
  

解决方案

问题在于视频正在显示绝对。你可以让你的链接 position：absolute ，这应该是。

My ultimate goal right now is to have a link appear on top of video when the video has reached the end. Using the JW Players functionality I have determined how to have the link appear when the video is complete but only in standard view. If the user views the video in fullscreen the link does not appear. I have done extensive reading and understand that when it is in fullscreen mode the video is in flash and I cannot override the flash functions without integrating the link into the swf file, which I do not want to do.

What I have done is to remove the fullscreen button in the JW Player video player using a skin. Then I created a button to display the video in fullscreen using the HTML5 fullscreen functionality. (I understand that IE will not work with this...that is fine for now). I am also able to create a fullscreen state change event listener so that my link will appear on top of the video. But it does not work.

No matter how I style the DIV which holds the link it does not appear on top of the video.

Can someone point me in the right direction?

Thank you for any help that anyone can give me.

Code example:

#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);

解决方案

The problem is that the video is being displayed absolutely. You can make your link have position: absolute and that should do it.

这篇关于如何在HTML5全屏视频之上制作DIV？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！