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(直接の)子で.BCLvideoWrapperある div、つまり元の<video>要素の代わりに video.js が挿入する div のみを照合する必要があります。その div 内の div はルールに一致しません。

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

.BCLvideoWrapper > .video-jsまたは、子だけを.video-jsクラスと一致させるために使用することもできます。これは<video>、javascript が無効になっている場合に、変更されていない要素にも一致します。

子セレクターと子孫セレクターの違いの説明については、この質問を参照してください

于 2013-09-18T12:22:14.173 に答える