在 HTML5 全屏视频上叠加答案

【问题标题】：Overlay on HTML5 Fullscreen Video在 HTML5 全屏视频上叠加
【发布时间】：2013-04-20 12:39:42
【问题描述】：

我想在 html5 视频上添加覆盖热点，这将帮助我提供有关该视频的信息。我能够成功地将它添加到 HTML5 视频的正常模式。但是，当我将视频模式更改为全屏时，它就会消失。想请人帮帮我！！！。

【问题讨论】：

【解决方案1】：

最好的方法是拥有一个包含<video> 和热点的<div>，并在包含<div> 上请求全屏。

我在 Firefox 中实现了全屏和（部分）<video> API。这个 z-index hack 不是指定的行为，所以一旦我们更新我们的实现以匹配 W3C 全屏规范的最新草案，它就会停止工作。

【讨论】：

花了半天时间试图找出 Firefox 下面的 z-index 东西。这是一个更好的解决方案。
我不认为使用视频控件的全屏按钮可以将视频设置为全屏并且无法取消。
@junvar - 也可能覆盖全屏按钮？
作为 chrome 扩展，而不是 web 开发，有没有办法全屏包含视频的 <div>，如果视频是使用视频全屏按钮全屏显示的：这不会发出 clickevent，所以没有办法退出FullScreen，然后进入容器div的FullScreen（需要用户输入！），我能想到的一种解决方法是用自定义按钮替换每个video的本机控件，我可以在其中收听clickevent。 W3C 规范解决方案？：将 onclick/keydown 事件添加到视频全屏按钮。或者让 onfullscreenchange 能够调用 requestFullscreen 如果它确实来自鼠标/键盘

【解决方案2】：

这可以通过一个技巧来解决。在此处查看此示例： http://jsfiddle.net/carmijoon/pZbkX/show/

z-index: 2147483647;

您还可以在此处查看代码： http://jsfiddle.net/carmijoon/pZbkX/

z-index: 2147483647;

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

你也可以在 jsfiddle 上分享你的文件吗？

【讨论】：