webサイト制作の勉強|2018月2月クラスブログ

webサイト制作の勉強に関する解説ブログです。

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

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;
}