HTML5全屏视频上的叠加层

Question

我想在 HTML5 视频上添加覆盖热点，以便向观众提供有关该视频的信息。我已成功地将其添加到 HTML5 视频的普通模式中。但是，当我将视频模式更改为全屏模式时，它消失了。希望有人能帮帮我！

- Suraj Jadhav

Answer 1

最佳实现方式是使用包含视频和热点的 <div> 元素，并在该元素上请求全屏。

我在 Firefox 中实现了全屏和部分视频 API。这种 z-index 安排不是规定的行为，因此一旦我们更新实现以匹配 W3C 全屏规范的最新草案，它将停止工作。

- Chris Pearce

---

花了半天时间在Firefox下尝试解决下面的z-index问题。这是一个更好的解决方案。 - Cody Moniz

我认为使用视频控件的全屏按钮不可能实现此功能，该按钮将视频设置为全屏模式并且无法取消。 - junvar

@junvar - 也许也可以将全屏按钮叠加在上面？ - Ropstah

作为一个Chrome扩展程序，而不是Web开发，有没有办法全屏显示包含视频的<div>，如果使用视频全屏按钮全屏，则不会发出单击事件，因此无法退出全屏，然后进入容器div的全屏（需要用户输入！），我能想到的一个解决方法是用自定义按钮替换每个video的本机控件，其中我可以监听单击事件。W3C规范解决方案？：将onclick / keydown事件添加到视频全屏按钮中。或者使onfullscreenchange能够调用requestFullscreen，如果它确实来自鼠标/键盘。 - Mr. Doge

Answer 2

这个问题可以通过一个技巧来解决。看一下这个例子: http://jsfiddle.net/carmijoon/pZbkX/show/ z-index: 2147483647;

你也可以在这里看到代码: http://jsfiddle.net/carmijoon/pZbkX/

z-index: 2147483647;

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

您能否在jsfiddle上分享您的文件？

- Carmijoon

---

太棒了！真是太棒了！如果我能给这个答案点赞100次，我一定会这么做。在找到这个答案之前，我对在全屏元素上叠加一个覆盖层感到绝望。非常感谢你，Carmijoon！ - Velojet

它在Chrome上运行正常，但似乎在Firefox和IE上无法工作。 - andiwin

这在手机上不起作用。有没有办法让这在安卓Chrome上运行？ - skos

这是Firefox的解决方案：https://dev59.com/iVcO5IYBdhLWcg3wcRNk - Dalibor

全屏模式下无法进行踩操作。 - Ajeet Eppakayala