11

我现在的最终目标是在视频结束时在视频顶部显示一个链接。使用 JW Players 功能，我已确定如何在视频完成时显示链接，但仅在标准视图中显示。如果用户全屏观看视频，则链接不会出现。我已经广泛阅读并了解，当它处于全屏模式时，视频处于 Flash 状态，如果不将链接集成到 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);
4

4 回答 4

14

这是一个简单的技巧，您需要将 z-index 的最大值 (z-index: 2147483647;) 添加到覆盖元素中。该技巧将解决您的问题。

z-index: 2147483647;

这是您更新的小提琴：http: //jsfiddle.net/TcpX5/36/

于 2014-11-20T15:29:58.467 回答
1

我设置了一个小演示，我使用的是 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。

于 2013-04-02T17:33:40.333 回答
1

HTML：

<div id="wrapper">
  <a>element I want to be visible in full screen mode</a>
  <video ...>
</div>

JS：

const wrapper = this.document.getElementById('wrapper')
wrapper.requestFullscreen()

此代码通常会在单击按钮时执行。包装器内的所有元素现在将在全屏模式下可见。您可能需要在全屏模式下对元素应用不同的样式。例如，您可能希望将视频宽度或高度设为 100%

使用它来了解您是否处于全屏模式：

document.onfullscreenchange = () => {
  this.isFullScreen = !!document.fullscreenElement
}

使用它退出全屏模式：

document.exitFullscreen()
于 2021-08-27T17:08:38.580 回答
0

问题是正在显示视频absolutely。您可以使您的链接具有position: absolute，并且应该这样做。

于 2013-04-02T17:09:22.397 回答