html - html5视频全屏限制div大小

Question

有谁知道如何将 HTML5 视频全尺寸限制限制在屏幕的一部分而不是整个屏幕。

示例：我的屏幕尺寸为 1920 * 1080，其中将显示我的整个页面，并且在页面顶部我有一个 920 * 800 的模态对话框，当我单击任何视频的全屏时，我将在其中显示视频列表占用我的整个屏幕大小 1920 * 1080，而不是它，我希望它只占用 920 * 800，这是我的模态对话框大小。有什么想法吗。任何帮助将不胜感激。

Answer 1

您可以通过在 JavaScript 的外部元素上使用 requestFullscreen 来全屏显示包含标记的外部元素，而不是使其自身全屏显示：

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode

不幸的是，如果您在视频元素上启用控件，它仍然会有自己的全屏按钮。可能有办法隐藏它；这是关于该主题的另一个问题：

如何在 HTML5 中隐藏视频标签的全屏按钮

但似乎并非在所有浏览器中都是可能的。最好的办法可能是隐藏所有视频的控件，并实现自己的控件（那里有做这种事情的开源，比如 video.js）。