javascript - Chrome 扩展 - 在全屏视频顶部显示自定义通知/弹出窗口(HTML 元素)

标签 javascript html google-chrome google-chrome-extension

我想为 Chrome 编写一个扩展(这似乎是最简单的选择),它可以在全屏视频顶部显示通知。

例如,假设您正在观看 Netflix 视频,chrome 会识别您正在观看的视频,检查数据库中是否有弹出窗口,如果找到一些弹出窗口,它会在特定时间显示它们(例如当视频处于 1 时: 05 或其他)。

虽然大多数部分看起来都是可行的,但主要问题是,如何在全屏模式下的视频顶部显示某些 HTML 元素?

非常感谢!

编辑

经过一些研究和答案提供的链接后,我找不到 Flash 播放器的答案 - 我想这不可能(轻易)实现。 然而,根据我的示例,我测试了 Netflix 视频,无论是否全屏,具有绝对定位和 z-index 高值的简单 div 始终可见。由于许多系统现在正在或正在转向 HTML5 视频,因此简单的解决方案应该适用于所有系统。 感谢马克·吉斯林的帮助。

最佳答案

我不久前问过我的分机:Force a div to show up and overlay whatever is in fullscreen

结果是这样的:你不能在 Flash 之类的东西上使用,但是,我发现你可以使用 document.fullscreenElement||document.webkitFullscreenElement 检测内容脚本中的 html 元素是否全屏显示。 .

如果它为空,则全屏状态下没有任何内容,但如果不是,那么您可以在全屏状态下向其附加内容。

此外,如果您想这样做,您可能希望使用 "all_frames": true 允许您的内容脚本在 iframe 中工作。在您的 list 中,因为许多网站现在使用可以全屏显示的嵌入式 iframe html5 播放器。

祝你好运。

关于javascript - Chrome 扩展 - 在全屏视频顶部显示自定义通知/弹出窗口(HTML 元素),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36181870/

相关文章:

javascript - Chrome 性能 : "standard" property names vs. 非标准

javascript - 如何从终端读取的最佳方法?卡蒂斯数星星

javascript - ( react )在谷歌地图上打开模式标记点击

javascript - React JS - 如何使用组件显示数据集?

javascript - 如何禁用 html 链接以调用 JS 函数?

javascript - Chrome 扩展 : How to get user name?

google-chrome - 在chrome中模拟socket.io临时断开连接

javascript - JS 在原型(prototype)上定义一个 getter 函数在对象本身上显示它

javascript - 在简单的登录表单中单击按 Enter 键

javascript - JQUERY HTML DIV 根据标签值隐藏和显示