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

相关文章

来自专栏Golang语言社区

GO语言 TCP传输实例

package main import ( "net" "fmt" ) var ( maxRead = 1100 msgStop = []byt...

3406
来自专栏互联网开发者交流社区

STC-单片机控制系统

1113
来自专栏逍遥剑客的游戏开发

实现一个同步的RenderApplication

1404
来自专栏张善友的专栏

通过SmtpClient发送Exchange会议邮件

看到C#中调用Outlook API 发起会议 ,这个完全可以用SMTP方式实现的,下面我的项目中使用的代码: 对于.NET而言,从2.0开始,发邮件已经是一件...

1949
来自专栏文渊之博

SSIS 实用表达式部分总结

下面,列出一些实用的表达式: 1,路径取文件名 1 RIGHT([FilePath],FINDSTRING(REVERSE([FilePath]),"\\",1...

1798
来自专栏听雨堂

数据库常规操作

   string a="Provider=Microsoft.Jet.OLEDB.4.0;Data Source=c:\\data.mdb;Persist S...

1959
来自专栏张善友的专栏

弹出式模态窗体选择文本控件

2006年就要到来了,最近比较忙,很少更新blog,今天发一个模态窗体选择文本控件辞旧迎新.新年在发几个asp.net2.0 webPart控件同各位分享: ...

1907
来自专栏hbbliyong

socket 通信 多线程调用窗体(委托)的几个知识点,记录在案,以备查阅

1.socket 通信传输汉字的方法:Encoding.GetEncoding("GB2312").GetString(Receivebyte) 发送接收都这样...

2737
来自专栏跟着阿笨一起玩NET

使用延迟的FileSystemWatcher来避免重复触发事件

  程序里需要监视某个目录下的文件变化情况: 一旦目录中出现新文件或者旧的文件被覆盖,程序需要读取文件内容并进行处理;但在实际处理中发现当一个文件产生变化时,C...

912
来自专栏木宛城主

曾今的代码系列——自己的分页控件+存储过程实现分页

项目里面的测试代码,仅供参考 LoginByAjax <title>Ajax登陆</title> <script src="Scripts/c...

1855

扫码关注云+社区