Html 如何在 HTML5 全屏视频顶部显示 DIV？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15770080/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I make a DIV visible on top of an HTML5 fullscreen video?
提问by bryankerk
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.
我现在的最终目标是在视频播放结束时在视频顶部显示一个链接。使用 JW Players 功能，我确定了如何在视频完成时显示链接，但仅在标准视图中显示。如果用户以全屏方式观看视频，则链接不会出现。我已经进行了大量阅读并了解到，当它处于全屏模式时，视频处于 Flash 中，如果不将链接集成到 swf 文件中，我将无法覆盖 Flash 功能，这是我不想做的。
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.
我所做的是使用皮肤删除 JW Player 视频播放器中的全屏按钮。然后我创建了一个按钮，使用 HTML5 全屏功能全屏显示视频。（我知道 IE 将无法使用此功能……暂时没问题）。我还可以创建一个全屏状态更改事件侦听器，以便我的链接显示在视频顶部。但它不起作用。
No matter how I style the DIV which holds the link it does not appear on top of the video.
无论我如何设计包含链接的 DIV，它都不会出现在视频的顶部。
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);
采纳答案by What have you tried
The problem is that the video is being displayed absolutely. You can make your link have position: absoluteand that should do it.
问题是正在显示视频absolutely。你可以让你的链接有position: absolute并且应该这样做。
回答by Carmijoon
It's a simple trick, you need to add the maximum value of z-index which is (z-index: 2147483647;) in to the overlay element. That trick will solve your issue.
这是一个简单的技巧，您需要将 z-index 的最大值 (z-index: 2147483647;) 添加到覆盖元素中。这个技巧会解决你的问题。
z-index: 2147483647;
Here is your updated fiddle: http://jsfiddle.net/TcpX5/36/
这是您更新的小提琴：http: //jsfiddle.net/TcpX5/36/
回答by Sandro Paganotti
I've set up a small demo, I'm using an HTML5 video, not a Flash Player, but the behaviour should be the same: http://jsfiddle.net/sandro_paganotti/TcpX5/
我设置了一个小演示，我使用的是 HTML5 视频，而不是 Flash Player，但行为应该是相同的：http: //jsfiddle.net/sandro_paganotti/TcpX5/
To toggle fullscreen I suggest using screenfull (https://github.com/sindresorhus/screenfull.js) that basically handles the small differences between Firefox and Chrome.
要切换全屏，我建议使用 screenfull ( https://github.com/sindresorhus/screenfull.js)，它基本上可以处理 Firefox 和 Chrome 之间的细微差别。
Here's the code, just substitute the <video>element with your JW Player implementation:
这是代码，只需将<video>元素替换为您的 JW Player 实现：
HTML
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
CSS
#video{ position: relative; }
a{ position: absolute; top: 10px; right: 10px;
border: 1px solid red; display: block; background: #FFF }
Javascript
Javascript
$('button').click(function(){
screenfull.request();
});
A final note: jsfiddle disallow the fullscreen mode (source: https://webapps.stackexchange.com/questions/26730/can-full-screen-mode-be-activated-in-jsfiddle) to see the demo you have to manually tweak jsfiddle iframe using chrome devtools or firebug as specified in the link above.
最后一点：jsfiddle 禁止全屏模式（来源：https://webapps.stackexchange.com/questions/26730/can-full-screen-mode-be-activated-in-jsfiddle ）以查看您必须手动的演示使用上面链接中指定的 chrome devtools 或 firebug 调整 jsfiddle iframe。
