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

Posted 2023-05-08

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

【英文标题】：How to hide full screen button of the video tag in HTML5

【发布时间】：2013-07-14 17:42:28

【问题描述】：

我需要在 html5 中隐藏视频标签的全屏按钮。 有什么方法可以实现吗？

谢谢。

【问题讨论】：

目前<video> 标记仅支持切换控件，无法控制具有controls 属性的任何属性。最接近禁用全屏的方法是禁用 controls 并制作自己的控制面板。

有趣的是，如果我添加属性“控件”但全屏按钮丢失，我会看到所有其他控件。w3schools.com/html/tryit.asp?filename=tryhtml5_video

【参考方案1】：

我认为您可以通过更改 #document fragments 的 css 来实现这一点，这些是 DOM1 规范，所有浏览器都支持，但关于样式，我不确定。

简单的webkit浏览器（windows上的chrome）具体解决方案

下面的解决方案是webkit特定的

video::-webkit-media-controls-fullscreen-button 
    display: none;

video::-webkit-media-controls-play-button 
video::-webkit-media-controls-timeline 
video::-webkit-media-controls-current-time-display
video::-webkit-media-controls-time-remaining-display 
video::-webkit-media-controls-mute-button 
video::-webkit-media-controls-toggle-closed-captions-button 
video::-webkit-media-controls-volume-slider 

Here is the fiddle 给它。

警告：

这不适用于具有除webkit 以外的渲染引擎的浏览器，例如Firefox 或 Internet Explorer，或具有 Blink/Presto 的过时版本的 Opera。 这可能不适用于 Windows 以外的操作系统中 webkit 浏览器的实现，例如macOS 上的 Safari。

更新：

在多名读者抱怨上述解决方案不适用于某些浏览器后，我正在更新答案。

照顾供应商特定的实施：

上述解决方案是 -webkit- 浏览器特定的，并在 Windows 上的 Chrome 中进行了测试。 shadow DOM 的实现尚未标准化，因此可能因浏览器供应商而异。 当今几乎所有的浏览器都拥有出色的开发工具，但有些功能被故意锁定，但稍费力气就可以打开，例如，在 Firefox 中，大多数此类配置都可以在 about:config 页面中访问。 建议开发人员在其浏览器中解锁 shadow DOM 功能。 然后，他们可以检查<video> 组件

如何在 Chrome 中启用 shadow DOM 选择

转到 Chrome > 开发者工具 > 设置（齿轮图标） 在Elements 下查找

显示用户代理影子DOM

选项 选中（选择）该框 您将能够检查底层的影子 DOM 观察它们各自的样式 您会注意到它们类似于伪类选择器

一些不请自来的免费建议Hiding the full screen button of the video tag in HTML5

找到解决方案就像使用伪类选择器编写 CSS 一样简单 但与其他所有 CSS 一样，它可能需要大量的反复试验 要让它发挥作用，您可能会遇到很多挫折 但永远记住，这是值得的。

另外，正如@paulitto 所建议的，DOM 方法可以在从<video> 元素中删除controls 属性后实现。更多信息请参考this tutorial。

【讨论】：

我正在使用 android 的 WebView，全屏按钮显然不起作用（在 Android 4.2.2 和 4.4.2 上测试）。如果这个特定应用程序的用户不能使视频全屏显示，这并不重要，所以我想我应该找到一种方法来禁用全屏按钮。这成功了。

我正在尝试做同样的事情，尼克。愿意分享您的代码吗？

@FractalBob - 查看 [fiddle](jsfiddle.net/deveedutta/TFU4V/5/) 并告诉我它是否不起作用

@Nick - 谢谢，我看到了，但不确定 CSS 应该插入到应用程序的哪个位置。

这不适用于 mac-chrome、firefox 和 safari。

【参考方案2】：

您只需在您的 css 中编写此代码：

video::-webkit-media-controls-fullscreen-button 
    display: none;

全屏按钮会隐藏

【讨论】：

是的，此解决方案有效，但并非在每个浏览器中都有效

【参考方案3】：

我认为如果不隐藏所有控件，您将无法做到这一点。 您可以使用它的dom methods 来实现您自己的控件并将它们设计为与内置控件完全相同

或者你也可以使用外部html5视频插件来实现这个

【讨论】：

不错的方法。我在上面看到了tutorial。希望对你有帮助

【参考方案4】：

您可以使用controlsList="nofullscreen" 属性禁用全屏按钮

支持的浏览器：Chrome、Edge、Edge Beta。它不适用于 Firefox。

Refer the fiddle

属性值： controlsList="nodownload nofullscreen noremoteplayback"

<video>标签中必须有controls属性才能获得controlsList的特征。

Reference Page

【参考方案5】：

您可以为控件编写自定义代码

例如。要更改视频时间，请使用以下代码

document.getElementsByTagName('video')[0].currentTime=10;

以下链接提供了使用 javascript 对视频进行手动控制的所有必要示例

HTML5 Video Events and API