Html 叠加在 HTML5 全屏视频上
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16234740/
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
Overlay on HTML5 Fullscreen Video
提问by Suraj Jadhav
I want to add overlay hotspots on a html5 video which will help me give info about that video. I was able to successfully add it on HTML5 Video's normal mode. But, when i change the video mode to fullscreen, it disappears. Want someone to help me please!!!.
我想在 html5 视频上添加叠加热点，这将帮助我提供有关该视频的信息。我能够在 HTML5 视频的正常模式下成功添加它。但是，当我将视频模式更改为全屏时，它消失了。希望有人帮助我请！！！！
回答by Carmijoon
This can be solved with a trick. Have a look on this example here: http://jsfiddle.net/carmijoon/pZbkX/show/
这可以通过一个技巧来解决。在这里看看这个例子：http: //jsfiddle.net/carmijoon/pZbkX/show/
z-index: 2147483647;
z-index：2147483647；
You can also see the code here: http://jsfiddle.net/carmijoon/pZbkX/
你也可以在这里看到代码：http: //jsfiddle.net/carmijoon/pZbkX/
z-index: 2147483647;
you need to add 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;) 添加到覆盖元素中。这个技巧会解决你的问题。
Can you also share your file on jsfiddle?
你也可以在jsfiddle上分享你的文件吗？
回答by Chris Pearce
The best way to do this is to have a <div> containing the <video> and your hotspots, and request fullscreen on the containing <div>.
最好的方法是让 <div> 包含 <video> 和您的热点，并在包含的 <div> 上请求全屏。
I implemented the fullscreen and (parts of the) <video> APIs in Firefox. This z-index hack isn't the specified behaviour, so it will stop working once we update our implementation to match the latest draft of the W3C fullscreen spec.
我在 Firefox 中实现了全屏和（部分）<video> API。这个 z-index hack 不是指定的行为，所以一旦我们更新我们的实现以匹配 W3C 全屏规范的最新草案，它就会停止工作。
