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

How to hide full screen button of the video tag in HTML5

提问by Arun

I need to hide the full screen button of the video tag in HTML5. Is there any way to achieve it ?

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

Thanks.

谢谢。

回答by DDM

I think you can accomplish this by changing the css for the #document fragments, these are DOM1 specs and supported by all browsers, but about the styling, I'm not sure.

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

Simple webkitbrowser (chrome on windows) specific solution

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

The following solution is webkitspecific

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

这是它的小提琴。

Warning:

警告：

1. This will not work on browsers who have a rendering engine other than webkite.g. Firefox or Internet Explorer, or obsolete versions of Opera that had Blink/Presto.
2. This may not work with implementations of webkitbrowsers in Operating systems other than windows e.g. Safari on macOS.

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

Update:

更新：

After multiple readers complained that the aforementioned solution did not work for certain browsers, I'm updating the answer.

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

Taking care of Vendor specific implementations:

照顾供应商特定的实现：

• The above solution is -webkit-browser specific and was tested in Chrome on Windows.
• The implementation of shadow DOM hasn't been standardized, and therefore, may vary from one browser vendor to another.
• Almost all browsers today have great developer tools, but some features are intentionally locked, but can be opened with a little effort, for instance, in Firefox most such configurations can be accessed in the about:configpage.
• Developers are advised to unlock the shadow DOM features in their browser.
• Then, they can inspect the <video>component

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

How to enable shadow DOM selection in Chrome

如何在 Chrome 中启用 shadow DOM 选择

• Go to Chrome > Developer Tools > Settings (gear icon)
• Under Elementslook for Show user agent shadow DOMoption
• Check (select) the box
• You'll be able to inspect the underlying shadow DOM
• Observe their respective styling
• You will notice that they're similar to pseudo class selectors

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

Some unsolicited free advise for Hiding the full screen button of the video tag in HTML5

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

• Finding the solution can be as easy as writing CSS with pseudo class selectors
• But like every other CSS, it might require a lot of trial-n-error
• And you might undergo a lot of frustration to make it work
• But always remember, it's worth it.

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

Additionally, as @paulitto suggests, DOM methods can be implemented after removing controlsattribute from <video>element. Refer this tutorialfor more.

此外，正如@paulitto 所建议的，DOM 方法可以在controls从<video>元素中删除属性后实现。有关更多信息，请参阅本教程。

回答by GrazZ

You need just to write this code in your css:

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

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

And the fulscreen button will hide

全屏按钮将隐藏

回答by paulitto

I think you are not able to do that without hiding all the controls. You can use its dom methodsto implement your own controls and design them to look exactly the same as built in controls

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

Or you can also use external html5 video plugins to implement this

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

回答by mujaffars

You can write your custom code for controls

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

eg. For changing video time use below code

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

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

Below link provides all necessary examples to do manual controls on video with javascript

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

HTML5 Video Events and API

HTML5 视频事件和 API