全屏视频如何工作？

Question

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

但是，在全屏模式下，这些元素不会显示。我想尝试解决这个问题，但我甚至不知道全屏模式是如何工作的，或者我怎么能确保视频中的元素在全屏模式下正确缩放。

Answer 1

HTML5中的全屏是一种模式，浏览器将元素及其包含的所有元素放入特殊的全屏模式，在该模式下，它具有通过浏览器的chrome渲染的特殊权限，并执行一些其他操作，如句柄键盘输入。

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

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

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