HTML5学堂-码匠 HTML5学堂

您当前位于:HTML5高级知识 ——> HTML5 视音频,如何去除全屏中的控制栏

HTML5 视音频,如何去除全屏中的控制栏

2015/08/12 19:00:09 | 作者:HTML5学堂(码匠) | 分类:HTML5高级知识 | 关键词:HTML5,video,全屏,控制栏,视音频

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

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

发现问题

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

  1. <video class="video-wrap" preload="auto" poster="../images/html5.png">
  2.     <source type="video/webm" src="../video/baobao.webm"></source>
  3.     <source type="video/ogg" src="../video/wildlife.ogg"></source>
  4.     <source type="video/mp4" src="../video/wildlife.mp4"></source>
  5. </video> 

谷歌下

谷歌下视频的控制栏

火狐下

火狐下视频的控制栏

分析问题

控制栏不是标签

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

不是吧,控制栏是Shadow DOM。

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

欢迎沟通交流~HTML5学堂

Shadow DOM的示例

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8" />
  5.     <title>HTML5Course - 梦幻雪冰</title>
  6.     <link rel="stylesheet" type="text/css" href="reset.css" />
  7. </head>
  8. <body>
  9.     <p>HTML5学堂、刘国利、陈能堡</p>
  10.     <div id="shadow"></div>
  11.     <script>
  12.         var shadowEle = document.getElementById("shadow");
  13.  
  14.         var root = shadowEle.createShadowRoot();
  15.         root.textContent = "我在你的心里面~";
  16.     </script>
  17. </body>
  18. </html>

效果

Shadow DOM示例

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

解决问题

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

  1. video::-webkit-media-controls-enclosure {
  2.     /*禁用播放器控制栏的样式*/
  3.     display: none !important;
  4. }

效果

视频的控制栏隐藏掉

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

控制栏的z-index的值

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

自定义的视频控制栏效果

自定义的导航栏效果

总结

1、禁用视频的控制栏

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

demo下载——点击下载(访问密码 311c)

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端

iOS,APP,码集,案例交互,JavaScript学习,WEB前端,HTML5

iOS APP 码集

案例交互式学习JS