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

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

发现问题

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

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

谷歌下

火狐下

分析问题

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

不是吧,控制栏是Shadow DOM。

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

Shadow DOM的示例

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>HTML5Course - 梦幻雪冰</title>
  <link rel="stylesheet" type="text/css" href="reset.css" />
</head>
<body>
  <p>HTML5学堂、刘国利、陈能堡</p>
  <div id="shadow"></div>
  <script>
      var shadowEle = document.getElementById("shadow");


      var root = shadowEle.createShadowRoot();
      root.textContent = "我在你的心里面~";
  </script>
</body>
</html>

效果

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

解决问题

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

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

效果

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

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

自定义的视频控制栏效果

总结

1、禁用视频的控制栏

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

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-01-07

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏青蛙要fly的专栏

Android技能树 — 数组,链表,散列表基础小结

现在安卓面试,对于数据结构的问题也越来越多了,要求也越来越多,所以我对于数据结构只能慢慢补起来了。(灬ꈍ ꈍ灬)

944
来自专栏ml

C++对于大型图片的加载缩放尝试

Qt对于图片的操作主要集中在这几个类 QImage ,QImageReader ,QPixmap 其中QImage这个类对图片的缩放有几个很不错的技巧,不过对于...

3477
来自专栏iKcamp

翻译连载 | 附录 A:Transducing(下)-《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇

原文地址:Functional-Light-JS 原文作者:Kyle Simpson-《You-Dont-Know-JS》作者 JavaScript 轻量级函数...

1818
来自专栏带你撸出一手好代码

编程语言函数多返回值处理方式排名

一个函数一个返回值 , 这好像跟祖宗定下的规则似的,各个时代主流编程语言几乎都严格遵守着。然而, 在实际情况下, 程序员写代码经常会碰到一个函数会返回多个返回值...

3167
来自专栏微信小程序开发

CSS实现多列复杂界面布局

最近做一个云客服项目,可以把多个微信号消息集中到一个客服平台中,方便统一管理,这里就不详细说客服平台的功能。 做为码农,工作职责就是把功能实现了,在此,我简单说...

56613
来自专栏take time, save time

初级程序员面试不靠谱指南(五)

四、递归的第一次亲密接触     我经常会想,如果给没有学过计算机或者数学的人说递归这个词他们脑中会怎样理解这个词的意思。递归这个概念在面试中出现的概率大于85...

3288
来自专栏Bingo的深度学习杂货店

从M走到N最少步数

假设一个人站在 X 轴的正半轴上,起始点在 M 点(0 <= M <= 100000),他每次可以向左走一步,向右走一步,或者走到所在坐标乘以2的位置,最终来到...

442
来自专栏数据小魔方

Xcelsius(水晶易表)系列7——多选择器交互用法

今天继续跟大家讲解水晶易表动态仪表盘的高级用法——多选择器交互用法。 关于选择器的用法,之前的几篇零零碎碎的讲了些,今天是专门讲解水晶易表中几种重要的选择器用法...

3126
来自专栏听雨堂

LegacyText的复制的Bug

        如果要动态复制一个LegacyText的文字,保持原来的中心位置,角度等,但修改其大小,发现有个别文字会偏离真正的中心位置,结果一番跟踪,发现问...

1767
来自专栏前端杂货铺

样式化加载失败的图片

本片文章翻译自 Styling Broken Images 翻译过程中可能会在原意不变的基础上有些细微改动,望读者见谅 加载失败的图片是比较丑陋的,比如 但是我...

3257

扫码关注云+社区