HTML5视频-仅禁用全屏

Question

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

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

我可以将控件设置为false并使用自动播放视频的功能-然后我没有控件-而视频将只播放..-但是我认为这是“解决方案”过于严格的做法。

那么可以采取什么样的解决方案来实现我想要的？

Answer 1

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

只要确保在CSS中包含以下内容：

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

随着像这样的影子DOM操作变得越来越普遍，希望有更多的浏览器支持它。在此之前，坚持做定制控件或将影片中的iframe，只要你的src指向与HTML文件video在它的标签，并指定allowfullscreen="false"了iframe。

Answer 2

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

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