Videoタグを使ってサイトに動画を表示する方法

html5から新たに追加された、
動画を再生する為のvideoタグについてまとめました。

videoタグの書き方

最もシンプルな記述です。

以下のようにsourceを使用すると、複数の動画を指定出来ます。

 

上記の場合、まずはvideoname.mp4が再生され、
mp4ファイルに対応していないブラウザの場合は、wmvファイルが読み込まれます。

videoタグの属性

videoタグに属性を加えることで、自動再生やループなどに対応出来ます。

autoplay
自動再生する

loop
繰り返し再生する

muted
無音で再生する

preload
ページを読み込んだ時点で裏側で動画を読み込むかどうか
auto：動画を裏側で読み込む（初期値）
none：動画の事前読み込みを禁止
metadata：ファイルサイズ・再生時間などの動画のメタデータのみを読み込む

poster
動画を読み込めない、再生できないときに表示させる画像を指定

playsinline
iOSでvideoタグをインライン再生
※インライン再生を可能にするためには「autoplay」「muted」「playsinline」の3つの指定が必須です

controls
動画のコントロールパネルを表示

width
動画の幅を指定

height
動画の高さを指定

動画を無音で、繰り返し自動再生させたい場合には以下のように指定します。

 

 

Androidでの注意点

Basic認証をかけていると、Androidで動画が再生されない場合があります。
その場合は、.htaccessに以下を記述します。