HTML5视频 - 仅禁用全屏

Question

我正在为我的网页使用视频标记，而我正试图从控件中排除全屏。

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

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

那么可以采用什么样的解决方案来实现我的目标呢？

Answer 1

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

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

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

随着像这样的影子DOM操作变得越来越普遍，更多的浏览器将有望支持它。在此之前，只要您的iframe指向包含src标记的html文件，就可以坚持制作自定义控件或将视频置于video内，并指定{{1}对于allowfullscreen="false"。

Answer 2

controls是二进制状态，您可以拥有浏览器提供的内容，也可以不拥有任何内容。

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