Question

我现在的最终目标是在视频播放结束时在视频顶部显示一个链接。使用JW播放器功能我已确定如何在视频完成时显示链接但仅在标准视图中显示。如果用户以全屏方式查看视频，则不会显示该链接。我已经做了大量的阅读并理解，当它处于全屏模式时，视频处于闪存状态，如果不将链接集成到swf文件中，我无法覆盖flash功能，我不想这样做。

我所做的是使用皮肤删除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之间的细微差别。

以下是代码，只需将<video>元素替换为JW Player实现：

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，并且应该这样做。

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

3 个答案:

HTML

CSS

的Javascript