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 条评论
登录 后参与评论

相关文章

来自专栏Phoenix的Android之旅

重构-如何编写一段好的代码

关于重构,很多人可能都有惨痛的经验, 就不说去阅读别人的代码了, 有时候自己写的代码过半年,可能自己都看不明白, 这时候再来重构代码是一件很痛苦的事情。

633
来自专栏小樱的经验随笔

BugkuCTF web基础$_GET

前言 写了这么久的web题,算是把它基础部分都刷完了一遍,以下的几天将持续更新BugkuCTF WEB部分的题解,为了不影响阅读,所以每道题的题解都以单独一篇文...

29910
来自专栏web前端教室

js不好学并不是因为它难,而是因为它容易混淆

这段时间我主讲的前端零基础课,让我感觉js这东西是越来越简单了。你当然可以说我这是越讲课越熟。确实是有这部分因素,但更主要的是,我发现js中虽然有许多的概念各不...

1917
来自专栏wOw的Android小站

[Objective-C] Block实现回调和简单的学习思考

关于Objective-C的回调,最常见的应该是用delegate代理实现。不过代理的实现比起Block要更基础,就不介绍了,下面总结一下Block回调的实现。

452
来自专栏java一日一条

程序中减少使用if语句的方法集锦

大约十年前,我听说了反if的活动,觉得这个概念非常荒谬。如果不用if语句,又怎么能写出有用的程序呢?这简直太荒谬了。

662
来自专栏前端黑板报

搜索技巧

外事不决问谷歌,内事不决还问谷歌。 如何问? 我们的提问如何能被搜索引擎更好的识别或者说如何更准确的得到我们想要的答案,快速解决我们的问题。下面就带来一些搜索的...

1737
来自专栏大数据钻研

前端面试经典问题:CSS中居中的几种方式

作为面试常客,学会这些,面试多点把握,同学间逼格升高 周五,老大说他面试了一个问题,是css居中的问题,然后我们在这边就讨论了一番,周末嗨玩,尾巴上想起这件事,...

3666
来自专栏Java 源码分析

markdown语法

Markdown 语法说明 (简体中文版) / (点击查看快速入门) 概述 宗旨 兼容 HTML 特殊字符自动转换 区块元素 段落和换行 标题 区块引用 列表 ...

2684
来自专栏tkokof 的技术,小趣及杂念

Sweet Snippet系列之 Print Lua Table

Lua中唯一的内建数据结构就是关联数组(table),平时我们使用Lua时自然也一直在和table打交道,由于Lua中table的灵活性,使其拥有了强大的数据表...

481
来自专栏编程

十步零基础JavaScript学习路径

之前写过一篇26天学通前端开发,内容主要讲的就是前端学习路径,今天再来写一篇零基础的JavaScript学习路径,希望能帮编程零基础的前端爱好者指明方向。 开发...

1849

扫描关注云+社区