web-dev-qa-db-ja.com

完全に応答するHTML5ビデオ

絶対に配置された<video>要素にHTML5を含めて、ウィンドウの幅と高さにサイズ変更して、何もトリミングされないようにすることはできますか？私が見たソリューションの多くは、私が持っていない<iframe>タグに依存しているか、幅に基づいてサイズを変更するだけです（すでに実行可能です）。

基本的に私はビデオができるだけ大きくなるようにする方法を探していますが、IE9でもウィンドウのサイズが変更されてもトリミングされません。 （注：比率を維持する必要があるので、黒いバーがあっても問題ありません。）

これは私がこれまでに試したことです。

/*CSS*/

#player-overlay {
  position: absolute;
  display: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000        
    z-index:999;
}
<!--HTML-->

<div id="player-overlay">
  <video width="100%" video="100%" style="width:100%, height:100%">
    <source src="../static/video/10s.mp4" />
    <source src="../static/video/10s.webm" type='video/webm; codecs="vp8, vorbis"' />
    <source src="../static/video/10s.ogv" type='video/ogg; codecs="theora, vorbis"' />
  </video>    
</div>

代わりにJSソリューションを書いてみようと思っています。

javascriptjqueryhtmlcsshtml5-video
16
Chuck Le Butt

max-height要素でwidthと<video>を使用します。

/*CSS*/ 
video {
  width: 100%;
  max-height: 100%;
}
<!-- HTML -->

<div id="player-overlay">
  <video>
    <source src="../static/video/10s.mp4" />
    <source src="../static/video/10s.webm" type='video/webm; codecs="vp8, vorbis"' />
    <source src="../static/video/10s.ogv" type='video/ogg; codecs="theora, vorbis"' />
  </video>    
</div>

http://jsfiddle.net/fHG69/

また、background-colorの後にセミコロンがありません。画面いっぱいに要素を絶対配置する場合、topとbottomを設定する代わりに、left、right、height、widthを設定することを好みます。

23
gilly3

（私はこれが古いスレッドであることを知っていますが、私の答えがそこの誰かを助けることを願っています。）

実際には、あなたはすでに正しい解決策を持っていました。 style="width:100%, height:100%"の<video>は機能しますが、カンマの代わりにセミコロンが必要です。 （冗長なwidth="100%"およびvideo="100%"属性を削除できます。）

width: 100%; height: 100%が機能する理由（セミコロンに注意）は、<video>要素が引き伸ばされても、ビデオ自体が縦横比を維持し、<video>要素内でレターボックス化/ピラーボックス化されるためです。 https://stackoverflow.com/a/4000946/5249519 。

height: 100%の利点は、ビデオがレターボックスで正確に中央に配置されることですが、max-height: 100%の場合、ビデオはコンテナの上部に配置されます。

また、<video>をdisplay: blockに設定する必要があります。それ以外の場合は、デフォルトでdisplay: inlineになり、動画の下部にフォントディセンダー用の空白が表示されます。 HTML5のcanvas/video/audio要素の下に4pxのギャップがあります 。

最後に、@ gilly3が言ったように、background-color: #000の後にセミコロンが必要です。そしてもちろん、display: noneを削除する必要があります。 =）

ここに完全な解決策があります：

/*CSS*/

#player-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  z-index: 999;
}

video {
  display: block;
  width: 100%;
  height: 100%;
}
<!--HTML-->

<div id="player-overlay">
  <video controls>
    <source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm">
    <source src="http://techslides.com/demos/sample-videos/small.ogv"  type="video/ogg">
    <source src="http://techslides.com/demos/sample-videos/small.mp4"  type="video/mp4">
    <source src="http://techslides.com/demos/sample-videos/small.3gp"  type="video/3gp">
  </video>
</div>

「全ページ」モードでコードスニペットを実行し、ブラウザウィンドウのサイズを変更してレターボックス効果を確認します。

ところで、ビデオソースが機能しなくなったため、次のサンプルビデオを使用しました http://techslides.com/sample-webm-ogg-and-mp4-video-files-for-html5 。

お役に立てば幸いです。

6
DynamicDispatch

レスポンシブビデオで何か他のものを見つけようとしたときに、私はこの答えに出くわしました。同様のコードを使用してレスポンシブビデオ要素を実装しました。

このリンクは、いくつかのことを理解するのに役立ちます 高さは幅純粋なCSSと等しい

コードは次のようになります。

#player-overlay {
  position: relative;

  &:before {
    content:'';
    display: block;
    padding-top: 50%;  // 50% equals a 2:1 ratio. you can read more about
                       // the ratios in the link
  }
}

video {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}

Before疑似要素のパディングトップを変更するだけで、比率を変更できます。

0
Odin13