WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

object-fitを使って動画を要素にはめ込む

www.ditjapan.com




object-fitプロパティは、置換要素(img要素やvideo要素など)をボックスにどのようにはめ込むかを指定する際に使用します。

  • fill

置換要素(img要素やvideo要素など)をボックスサイズに合わせて縦横比を維持しないでリサイズして、全体が見えるようにはめ込む(初期値)

  • contain

置換要素(img要素やvideo要素など)をボックスサイズに合わせて縦横比を維持しながらリサイズして、全体が見えるようにはめ込む

  • cover

置換要素(img要素やvideo要素など)をボックスサイズに合わせて縦横比を維持しながらリサイズして、トリミングしてはめ込む

  • none

置換要素(img要素やvideo要素など)をリサイズしないで、ボックスサイズでトリミングしてはめ込む

  • scale-down

置換要素(img要素やvideo要素など)のサイズとボックスサイズの小さい方に合わせて、縦横比を維持しながらリサイズして、全体が見えるようにはめ込む。 言い換えれば、指定するボックスサイズと置換要素の実寸サイズの大小関係に応じて contain または none を指定したときと同じ表示となる


f:id:yachin29:20180803121533p:plain



video要素を使う際に気をつけないといけないので、動画を自動再生する場合、OSやブラウザーのバージョンによって仕様がバラバラなので、必ず事前にチェックしましょう。








再生範囲を指定する
videoタグ(及びaudioタグ)では、下記の書き方をすることで再生範囲を指定することが出来ます。

<video src="movie.mp4#t=[starttime][,endtime]"></video>

※Edge・IEは、今のところ未対応
【使用例】
「movie.mp4#t=5,10」5秒時点から10秒時点の範囲を再生
「movie.mp4#t=,8」始点から8秒時点の範囲を再生
「movie.mp4#t=,01:30:00」始点から1時間30分の範囲を再生
「movie.mp4#t=5」5秒時点から最後まで再生



www.plusdesign.co.jp




<div class="wrapper">
<video src="img/Turntable.mp4" autoplay muted loop>
</video>

</div>


スタイルシート

.wrapper {
width: 100%;
height: 100vh;
position: relative;
  overflow: hidden;
}
video {
  object-fit: cover;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

非常に便利なobject-fitですが、ブラウザーによってimg要素とvideo要素の扱いが違います。


Can I use... Support tables for HTML5, CSS3, etc

上記のようにEdgeはimg要素のみにしか適用しない為video要素に掛けたい場合は、専用のプラグインを入れる必要があります。

この「object-fit-videos」というプラグインを使う事で、Edgeでもvideo要素にobject-fitを掛けれるようになります。
github.com