HTML5 videoタグの埋め込みについて

2020-03-19

サイトの中に、動画を入れたいという場合、YouTubeではなく、自前の動画を入れたいという場合もあるかと思います。
その際は、<video>タグを使用して、動画を埋め込むことができます。


基本的な記述

というように記述します。<source>タグを使用することで、複数のブラウザを考慮し、もし、aviファイルが動作しないブラウザであっても、mp4ファイルを再生させるというというようにすることができます。

属性について

属性 効果
src (URL) ファイルのURL
height 数値 要素の高さ
width 数値 要素の幅
autoplay autoplay 自動的に再生を行います。
controls controls 動画再生をコントロールするUIを表示します。
loop loop 動画を繰り返し再生します。
preload auto
none
metadata
動画ファイルを読み込みはじめるタイミングを設定します。preloadが指定されていてもautoplayが入っている場合、autoplayが優先されます。

auto: 事前に読み込む/事前に読み込んでも良い
none: 事前に読み込まない
metadata: メタデータだけ読み込む

poster (URL) ブラウザが指定したファイルを再生できない環境の場合、代替する画像を指定できます。
muted muted 動画に音声がついている場合、音を出さない設定にできます。
mediagroup 任意の文字列 audioとvideoなどを同期できます。同じ値を入力することで、同じグループとして指定し、再生を同期することができます。

詳しくはこちら


自動再生

autoplay属性を指定すると、データの読み込みが完了した時点で(再生ボタンを押さなくても)自動で再生が始まります。ただし、chromeやsafariではmuted属性で動画の音がでないように設定しておく必要があります。

また、スマホの自動再生は、現在、全てに対応というわけではないので、基本できないと考えていた方がいいです。playsinline属性を入れておかないとiOSでは表示されません。
そして、動画が表示されない場合の代替として、poster属性で画像を用意しておくことをオススメします。