html5消除自动隐藏控制条,HTML5 视音频，如何去除全屏中的控制栏

HTML5视音频-解决全屏下出现的控制栏

HTML5学堂：HTML5视音频-解决全屏下的控制栏。HTML5可以简简单单的实现视频、音频的播放功能，功能虽好用，但是它的默认样式有点淡淡的忧伤，问题虽存在，解决的办法总是有的，今天我就给大家来分享一下解决视频全屏下出现的控制栏。

发现问题

video标签去除controls属性全屏下仍然出现控制栏

谷歌下

火狐下

分析问题

视频的控制栏不是标签？那是什么？

不是吧，控制栏是Shadow DOM。

Shadow DOM是指浏览器的一种能力，它允许在文档(document)渲染时插入一棵DOM元素子树，但是这棵子树不在主DOM树中

欢迎沟通交流~HTML5学堂

Shadow DOM的示例

html>

HTML5Course - 梦幻雪冰

HTML5学堂、刘国利、陈能堡

var shadowEle = document.getElementById("shadow");

var root = shadowEle.createShadowRoot();

root.textContent = "我在你的心里面~";

效果

影子宿主里面的内容没有被渲染，反而影子根里面的内容被渲染了出来。

解决问题

用伪选择器来解决播放器全屏下的控制栏(Shadow DOM)

video::-webkit-media-controls-enclosure {

/*禁用播放器控制栏的样式*/

display: none !important;

}

效果

自定义的控制栏z-index的值

视频的控制栏z-index的值为2147483647，自定义(自己实现的)的z-index必须大于2147483647的值。

自定义的视频控制栏效果

总结

1、禁用视频的控制栏

2、采用定位布局实现自定义视频控制栏，需要注意z-index的值。

欢迎沟通交流~HTML5学堂