html5视频全屏限制div大小

Question

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

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

Answer 1

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

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

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

How to hide full screen button of the video tag in HTML5

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