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

Question

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

感谢。

Answer 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。

警告：

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

<强>更新

在多位读者抱怨上述解决方案对某些浏览器不起作用之后，我正在更新答案。

负责供应商特定的实施：

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

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

• 转到Chrome＆gt;开发人员工具＆gt;设置（齿轮图标）
• 在Elements下查找显示用户代理影子DOM 选项
• 选中（选择）方框
• 您将能够检查基础影子DOM
• 观察各自的造型
• 您会注意到它们与伪类选择器类似

Hiding the full screen button of the video tag in HTML5

的一些未经请求的免费通知
• 查找解决方案就像使用伪类选择器编写CSS一样简单
• 但与其他所有CSS一样，它可能需要大量试用 - 错误
• 你可能会因为工作而感到非常沮丧
• 但永远记住，这是值得的。

此外，正如@paulitto建议的那样，从controls元素中删除<video>属性后，可以实现DOM方法。有关详情，请参阅this tutorial。

Answer 2

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

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

全屏按钮将隐藏

Answer 3

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

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

Answer 4

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

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

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

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

HTML5 Video Events and API

Answer 5

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

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

Refer the fiddle

属性值： controlsList="nodownload nofullscreen noremoteplayback"

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

Reference Page