注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梦幻雪冰

技在手,能在身,思在脑,从容过生活——陈能堡

 
 
 

日志

 
 

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

2015-08-13 13:19:24|  分类: HTML5 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
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/baobao.ogg"></source>
<source type="video/mp4" src="../video/baobao.mp4"></source>
</video>

谷歌下
HTML5视音频-解决全屏下出现的控制栏 - 梦幻雪冰 - 梦幻雪冰
 火狐下
HTML5视音频-解决全屏下出现的控制栏 - 梦幻雪冰 - 梦幻雪冰
 
分析问题
控制栏不是标签

视频的控制栏不是标签?那是什么?
不是吧,控制栏是Shadow DOM。
Shadow DOM是指浏览器的一种能力,它允许在文档(document)渲染时插入一棵DOM元素子树,但是这棵子树不在主DOM树中
欢迎沟通交流~HTML5学堂
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示例
影子宿主里面的内容没有被渲染,反而影子根里面的内容被渲染了出来。
解决问题
用伪选择器来解决播放器全屏下的控制栏(Shadow DOM)

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

效果
视频的控制栏隐藏掉
自定义的控制栏z-index的值
控制栏的z-index的值
视频的控制栏z-index的值为2147483647,自定义(自己实现的)的z-index必须大于2147483647的值。
自定义的视频控制栏效果
自定义的导航栏效果
总结
1、禁用视频的控制栏
2、采用定位布局实现自定义视频控制栏,需要注意z-index的值。

欢迎大家学习交流——梦幻雪冰
  评论这张
 
阅读(115)| 评论(2)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017