HTML5 视频 - 仅禁用全屏

Question

我正在为我的页面使用视频标签，并试图从控件中排除全屏。

我看到“控件”通常只是一个真/假陈述，但我正在寻找一种方法来禁用视频中的全屏选项。

我可以控制错误并使用自动播放视频 - 然后我没有控制 - 视频只会播放.. - 但我认为这是一个过于激烈的“解决方案”。

那么可以做什么样的解决方案来实现我正在寻找的东西？

Answer 1

对于包含影子 DOM 的浏览器（例如最新版本的 Chrome），您仍然可以使用默认控件，但隐藏全屏按钮。

请务必在您的 CSS 中包含以下内容：

video::-webkit-media-controls-fullscreen-button
{
        display: none !important;
}

随着像这样的影子 DOM 操作变得越来越普遍，更多的浏览器有望支持它。在那之前，坚持制作自定义控件或将视频放在iframe 中，只要您的src 指向一个带有video 标记的html 文件，并且您为iframe 指定allowfullscreen="false"。

Answer 2

controls 是一个二进制状态，你要么拥有浏览器提供的东西，要么什么都没有。

如果您不希望浏览器提供全屏控件但仍需要 UI，那么您需要关闭控件并使用 JavaScript 实现您自己的 UI。