全屏视频如何工作？

Question

具体来说，我正在使用 video.js 将视频实现到网站中。该视频具有 JS CSS 触发器，可在视频中的特定时间显示覆盖 div 元素（如 YouTube 注释）

但是，当处于全屏模式时，这些元素不会显示。我想尝试解决这个问题，但我什至不知道全屏模式是如何工作的，也不知道如何确保视频中的元素在全屏模式下正确缩放。

Answer 1

HTML5 中的全屏模式是浏览器将一个元素及其包含的所有元素置于特殊的全屏模式中的一种模式，在这种模式下它具有在浏览器的 chrome 上呈现的特殊权限并执行一些其他操作，例如句柄键盘输入。

这里没有什么特别的事情发生。您可以使用普通的 Chrome 调试工具来观察全屏模式的行为，这就是我建议调查全屏工作原理的方式。

但是对于您的特定问题，您的文本没有以全屏模式显示，解决方案是，而不是在视频元素上请求全屏，而是在包含您的视频播放器的 div 上请求全屏模式以及您的叠加元素。这样，字幕就会包含在全屏请求中。

您也可以尝试操纵字幕所在元素的 z-index，但根据 this answer，这不是首选解决方案，因为它预计有一天会停止工作。