在 HTML5 全屏视频上叠加

Posted 2023-05-07

【中文标题】在 HTML5 全屏视频上叠加

【英文标题】：Overlay on HTML5 Fullscreen Video

【发布时间】：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 上分享你的文件吗？

【讨论】：

太棒了！简直太棒了！如果我能以 100 票赞成这个答案，我会这样做。在找到这个答案之前，我对在全屏元素上获得覆盖感到绝望。谢谢一百万，卡米琼！

它适用于 chrome，但它似乎不适用于 firefox 和 IE

这不适用于移动设备。知道如何让它在 android Chrome 上运行吗？

Downwote，因为你们所有欣快的支持者，请在 Firefox 中尝试解决方案

这是 Firefox 解决方案：***.com/questions/45798213/…