0

我将我的 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>
4

1 回答 1

0

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

您应该.BCLvideoWrapper > div改为仅匹配作为 的（直接）子级的.BCLvideoWrapperdiv，即 video.js 插入代替原始<video>元素的 div。该 div 中的 div 与规则不匹配。

.BCLvideoWrapper > div {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

或者，您可以使用.BCLvideoWrapper > .video-js仅匹配子类与.video-js类 - 如果禁用 javascript，这也将匹配未修改的<video>元素。

请参阅此问题以了解子选择器和后代选择器之间的区别

于 2013-09-18T12:22:14.173 回答