Question

我有一个百分比宽度容器中的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" width="100%" height="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>

Answer 1

.BCLvideoWrapper div选择.BCLvideoWrapper的后代的所有div。由于video.js播放器由许多div组成（请查看浏览器的开发工具），这种风格会产生您所看到的意外后果。

您应该使用.BCLvideoWrapper > div来仅匹配.BCLvideoWrapper的（立即）子的div，即video.js插入的div代替原始{ {1}}元素。该div中的div与规则不符。

<video>

或者，您可以使用.BCLvideoWrapper > div { position: absolute; width: 100%; height: 100%; left: 0; top: 0; }仅匹配具有.BCLvideoWrapper > .video-js类的子项 - 如果禁用了javascript，这也会与未修改的.video-js元素匹配。

请参阅this question以了解子级和后代选择器之间的区别

Video.js控件位于顶部，暂停不起作用

1 个答案: