html5 video 隐藏全屏按钮,如何隐藏HTML5视频标签的全屏按钮?

35

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.

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

Simple webkit browser (chrome on windows) specific solution

The following solution is webkit specific

以下解决方案是特定于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 {}

这是小提琴。

Warning:

警告:

This will not work on browsers who have a rendering engine other than webkit e.g. Firefox or Internet Explorer, or obsolete versions of Opera that had Blink/Presto.

这将不适用于除了webkit之外有渲染引擎的浏览器，如Firefox或Internet Explorer，或有Blink/Presto的过时Opera版本。

This may not work with implementations of webkit browsers in Operating systems other than windows e.g. Safari on macOS.

这可能与在windows之外操作系统的webkit浏览器的实现不兼容，比如macOS上的Safari浏览器。

Update:

更新:

After getting frustrated over pointing multiple inattentive readers to the first comment on this post, who complained that the aforementioned solution doesn't work for blah-blah browser, I'm updating the answer.

当我为在这篇文章的第一个评论中指出许多粗心的读者而感到沮丧时，他们抱怨说前面提到的解决方案对blah-blah浏览器不起作用，于是我更新了答案。

Taking care of Vendor specific implementations:

The above solution is -webkit- browser specific and was tested in Chrome on Windows.

上面的解决方案是-webkit-特定于浏览器的，并在Windows上的Chrome中进行了测试。

The implementation of shadow DOM hasn't been standardized, and therefore, may vary from one browser vendor to another.

影子DOM的实现还没有标准化，因此，在不同的浏览器供应商之间可能存在差异。

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:config page.

现在几乎所有的浏览器都有很好的开发工具，但是有些特性是被故意锁住的，但是只要稍加努力就可以打开，例如，在Firefox中，大多数这样的配置都可以在about:config页面中访问。

Developers are advised to unlock the shadow DOM features in their browser.

建议开发人员在浏览器中打开阴影DOM特性。

Then, they can inspect the component

然后，他们可以检查

组件

How to enable shadow DOM selection in Chrome

Go to Chrome > Developer Tools > Settings (gear icon)

转到Chrome >开发工具>设置(齿轮图标)

Under Elements look for Show user agent shadow DOM option

在元素下面寻找Show user agent影子DOM选项

Check (select) the box

检查(选择)

You'll be able to inspect the underlying shadow DOM

您将能够检查底层的影子DOM

Observe their respective styling

观察各自的样式

You will notice that they're similar to pseudo class selectors

您将注意到它们类似于伪类选择器

Some unsolicited free advise for 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

找到解决方案就像用伪类选择器编写CSS一样简单

But like every other CSS, it might require a lot of trial-n-error

但是和其他CSS一样，它可能需要大量的试错

And you might undergo a lot of frustration to make it work

你可能要经历很多挫折才能让它发挥作用

But always remember, it's worth it.

但要记住，这是值得的。

Additionally, as @paulitto suggests, DOM methods can be implemented after removing controls attribute from element. Refer this tutorial for more.

此外，正如@paulitto所建议的，可以在从

元素中删除控件属性后实现DOM方法。更多信息请参考本教程。