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

Question

我需要在HTML5中隐藏视频标签的全屏按钮.有没有办法实现它？

谢谢.

Answer 1

我认为你可以通过改变css来实现这一点#document fragments,这些是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 {}

这是它的小提琴.

警告:

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

更新:

在多位读者抱怨前面提到的解决方案对某些浏览器不起作用之后,我正在更新答案.

照顾供应商的具体实施:

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

如何在Chrome中启用shadow DOM选择

• 转到Chrome>开发人员工具>设置(齿轮图标)
• 在下面Elements查看Show user agent shadow DOM选项
• 选中(选择)该框
• 您将能够检查底层的影子DOM
• 观察各自的造型
• 您会注意到它们与伪类选择器类似

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

• 找到解决方案就像使用伪类选择器编写CSS一样简单
• 但是和其他CSS一样,它可能需要大量的试验错误
• 你可能会因为它的工作而遭受很多挫折
• 但永远记住,这是值得的.

另外,正如@paulitto建议的那样,可以在controls从<video>元素中删除属性后实现DOM方法.请参阅本教程了解更多信息

Answer 2

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

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

参考小提琴

属性值： controlsList="nodownload nofullscreen noremoteplayback"

您必须在标签controls中具有属性<video>才能获取 的功能controlsList。

参考页

Answer 3

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

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

全屏按钮将隐藏

Answer 4

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

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