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

Question

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

谢谢。

Answer 1

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

简单webkit浏览器(chrome on windows)特定解决方案

下面的解决方案是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

警告:

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

更新:

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

负责供应商特定的实现:

• 上面的解是-webkit-特定于浏览器，并在 Windows 上的 Chrome 中进行了测试。
• shadow DOM 的实现尚未标准化，因此可能因浏览器供应商而异。
• 今天几乎所有的浏览器都有很好的开发者工具，但有些功能是有意锁定的，但可以通过一些努力打开，例如，在 Firefox 中，大多数此类配置都可以在 about:config 中访问。页面。
• 建议开发者在其浏览器中解锁影子 DOM 功能。
• 然后，他们可以检查 <video>组件

如何在 Chrome 中启用影子 DOM 选择

• 转到 Chrome > 开发者工具 > 设置(齿轮图标)
• 下Elements寻找Show user agent shadow DOM选项
• 勾选(选择)复选框
• 您将能够检查底层的影子 DOM
• 观察他们各自的造型
• 你会注意到它们类似于伪类选择器

一些未经请求的免费建议Hiding the full screen button of the video tag in HTML5

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

此外，正如@paulitto 所建议的，DOM 方法可以在删除controls 后实现。来自 <video> 的属性元素。引用this tutorial了解更多。