39

幅が40%videoのがあります。divhtml でwidth="100%" height="auto"、ビデオを非表示にします。ピクセル単位で特定のサイズを設定すると、div. HTML を空白のままにすると、ビデオのサイズが正しくなくなり、両端に黒いバーが表示されます。

他のほとんどの投稿で提案を試しましたが、うまくいかないようです。

<div id="box"><video id="trialvid" class="video-js vjs-default-skin"
  controls preload="auto" width="auto" height="auto" poster="images/reelthumbnail.jpg"
  data-setup='{"example_option":true}'>
 <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
 <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
 <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
</video>
</div>
4

6 に答える 6

85
于 2016-08-30T09:21:30.913 に答える
19

ビデオのデフォルトの絶対位置をオーバーライドするには、醜い !important を使用する必要があります。

.video-js {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
}

これが完了すると、ポスター画像がビデオの上ではなくビデオの後に表示されるため、次の方法で修正する必要があります。

.vjs-poster {
    position: absolute !important;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

きれいに表示するには、ビデオと同じ比率にする必要があることに注意してください。

于 2013-11-13T11:44:03.537 に答える
6

video タグの HTML で、幅と高さを auto に設定します。次に、CSS でビデオ ID の幅/高さを 100% に設定します。

幅と高さの属性を auto に設定すると、プレーヤーは div のように機能し、デフォルトでは寸法がありません。

于 2013-08-11T22:17:48.970 に答える
4

この問題を解決するために私が使用した方法は次のとおりです。最初に、ビデオ オブジェクトのサイズの宣言をすべて削除します。

包含要素の位置プロパティを相対に設定します。

.video_container {
  position: relative;
}

ポスター画像をそれを含む要素に追加し、その幅を 100% に、高さを auto に設定します。これにより、div がポスター画像の高さに合わせて垂直方向にサイズ変更されます (正しく行った場合は、ビデオと同じサイズになるはずです)。

.video_container img.poster {
  width: 100%;
  height: auto;
  position: relative;
  z-index: 10;
}

.video-js の位置を絶対に設定し、高さと幅を 100% に設定します。これにより、.video-js はポスター イメージの高さと幅に合わせてスケーリングされ、ポスター イメージは含まれる div に合わせて適切にスケーリングされます。

.video_container .video-js {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 110;
}

Zencoder などのサービスを使用して動画からサムネイルを動的に取得してサムネイルを生成し、ユーザーが動画をアップロードできるようにしている場合、垂直方向に比例して拡大縮小される画像から寸法を取得できるため、動画が常に適切に拡大縮小されます。

于 2014-02-24T14:04:44.557 に答える
2

これを見つけました： http://jsbin.com/idinaf/4/ここから編集 http://daverupert.com/2012/05/make-video-js-fluid-for-rwd/

これが誰かに役立つことを願っています。

編集：IMOは、単純なCSSでこれを試してください：

width: 100% !important;
height: auto !important;
于 2013-10-03T15:28:46.473 に答える