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

前端之家收集整理的这篇文章主要介绍了如何在HTML5中隐藏视频标签的全屏按钮前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我需要在HTML5中隐藏视频标签的全屏按钮。
有什么办法实现吗?

谢谢。

解决方法

我想你可以通过更改#document片段的CSS来实现这一点,这些是DOM1规范,所有浏览器都支持,但是关于样式,我不确定。
以下解决方案是特定于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为它。

另外,如@paulitto所说,可以在从< video>中删除控件属性后实现DOM方法。元件。请参阅this tutorial了解更多信息。

PS:我是怎么找到的?前往Chrome>开发工具>设置(齿轮图标)>在“元素”下查找显示用户代理阴影DOM,选中该框。您将能够检查底层的阴影DOM及其各自的样式。

猜你在找的HTML5相关文章