videoタグの埋め込みについて
2020-03-19
サイトの中に、動画を入れたいという場合、YouTubeではなく、自前の動画を入れたいという場合もあるかと思います。
その際は、<video>タグを使用して、動画を埋め込むことができます。
基本的な記述
1 2 3 4 5 6 7 8 9 |
<video controls src="sample.mp4"></video> または <video controls> <source src="sample.mp4" type="video/mp4"/> <source src="sample.avi" type="video/avi"/> <source src="sample.ogv" type="video/ogv"/> </video> |
というように記述します。<source>タグを使用することで、複数のブラウザを考慮し、もし、aviファイルが動作しないブラウザであっても、mp4ファイルを再生させるというというようにすることができます。
属性について
属性 | 値 | 効果 |
---|---|---|
src | (URL) | ファイルのURL |
height | 数値 | 要素の高さ |
width | 数値 | 要素の幅 |
autoplay | autoplay | 自動的に再生を行います。 |
controls | controls | 動画再生をコントロールするUIを表示します。 |
loop | loop | 動画を繰り返し再生します。 |
preload | auto none metadata |
動画ファイルを読み込みはじめるタイミングを設定します。preloadが指定されていてもautoplayが入っている場合、autoplayが優先されます。
auto: 事前に読み込む/事前に読み込んでも良い |
poster | (URL) | ブラウザが指定したファイルを再生できない環境の場合、代替する画像を指定できます。 |
muted | muted | 動画に音声がついている場合、音を出さない設定にできます。 |
mediagroup | 任意の文字列 | audioとvideoなどを同期できます。同じ値を入力することで、同じグループとして指定し、再生を同期することができます。 |
自動再生
autoplay属性を指定すると、データの読み込みが完了した時点で(再生ボタンを押さなくても)自動で再生が始まります。ただし、chromeやsafariではmuted属性で動画の音がでないように設定しておく必要があります。
1 |
<video controls autoplay muted playsinline src="sample.mp4" poster="sample.hpg" ></video> |
また、スマホの自動再生は、現在、全てに対応というわけではないので、基本できないと考えていた方がいいです。playsinline属性を入れておかないとiOSでは表示されません。
そして、動画が表示されない場合の代替として、poster属性で画像を用意しておくことをオススメします。