顶部的 Video.js 控件和暂停不起作用
Posted
技术标签:
【中文标题】顶部的 Video.js 控件和暂停不起作用【英文标题】：Video.js controls at the top and pause doesn't function 【发布时间】：2013-09-17 21:29:16 【问题描述】：我将我的 video-js 播放器放在一个百分比宽度的容器中，它终于可以很好地调整大小。但是控件被放置在视频的顶部而不是底部，并且暂停按钮将不起作用。滑块、音量和全屏都可以工作，但不能暂停。我试过 4.2 和 4.2.1 都没有运气。如果我使用此处托管的版本：“http://vjs.zencdn.net/c/video-js.css”，则暂停有效，但控件仍位于顶部。
我已经在 firefox 和 chrome 中测试过，但没有成功。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="http://vjs.zencdn.net/4.2.1/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.2.1/video.js"></script>
<script src="vidjs/z-skin.css" rel="stylesheet"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<style type="text/css">
.BCLvideoWrapper
position: relative;
padding-top: 0px;
padding-bottom: 56.25%;
height: 0;
* html .BCLvideoWrapper
margin-bottom: 45px;
margin-top: 0;
width: 100%;
height: 100%;
.BCLvideoWrapper div,
.BCLvideoWrapper embed,
.BCLvideoWrapper object,
.BrightcoveExperience
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
</style>
</head>
<body>
<div id="indexvid">
<div class="BCLvideoWrapper">
<video id="QuickReel" class="video-js vjs-default-skin"
controls preload="auto" poster="images/reelthumbnail.jpg"
data-setup="">
<source src="media/reel.mp4" type='video/mp4' />
<source src="media/reel.webm" type='video/webm' />
</video>
</div><!--BCL--></div><!--indexvid-->
</body>
</html>
【问题讨论】：
【参考方案1】：.BCLvideoWrapper div 选择所有属于.BCLvideoWrapper 的后代 的 div。由于 video.js 播放器由许多 div 组成（查看浏览器的开发工具），因此这种样式会产生您所看到的意想不到的后果。
您应该使用.BCLvideoWrapper > div 来仅匹配.BCLvideoWrapper 的（直接）子 div，即video.js 插入的div 代替原始<video> 元素。该 div 中的 div 与规则不匹配。
.BCLvideoWrapper > div
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
或者，您可以使用.BCLvideoWrapper > .video-js 仅匹配具有.video-js 类的子元素——如果禁用了javascript，这也将匹配未修改的<video> 元素。
查看this question 了解子选择器和后代选择器之间的差异
【讨论】：
以上是关于顶部的 Video.js 控件和暂停不起作用的主要内容，如果未能解决你的问题，请参考以下文章
HTML5 视频播放/暂停控件仅在 Safari 浏览器中不起作用
我的Android进阶之旅------>Android中ListView中嵌套(ListView)控件时item的点击事件不起作的问题解决方法