<video>の解説｜クロノドライブのHTML5辞典

「video」とは、ビデオファイルを文書内に埋め込むためのタグです。<video>タグを使用することで、ユーザーはプラグインをインストールしなくても、標準のHTMLから動画を見ることができます。

再生する音声ファイルはsrc属性で指定します。
ただし、MP4、OGV、WebMなどの選択肢を複数指定し、MP4に対応していない場合は別の再生形式を試みるというようにしたい場合は、src属性を使わずに<video>の子要素として<source>を使います。ブラウザは<source>タグに記述されている順に再生可能なデータを利用しようとするので、ユーザーの環境を問わずに動画を視聴してもらえる可能性が高くなります。

poster属性に動画中の画像ファイルのURLを指定することで、動画のロード前/再生前や、動画がロードできなかった場合などにかわりに表示しておく画像を指定することができます。動画内のどこかのフレームのキャプチャ画像を使うことで、ユーザに動画の内容がどんなものかを伝えることができます。

width属性とheight属性によって、動画の幅、高さをピクセルで指定することができます。

controls属性を指定すると、再生ボタンや停止ボタンなどを表示させることができます。

autoplay属性を指定すると、ページを読み込んだ時点で動画が自動的に再生されるようになります。

muted属性を指定すると、動画は音声抜きで再生されます。

loop属性を指定すると、動画の再生がループし、繰り返し再生されるようになります。

preload属性は、ページがロードされた段階で動画データの先読みをどうするかについて、ブラウザへヒントを与えるものです。ユーザが再生ボタンなどで動画を再生しようとする前にデータの先読みをしておくことで、ユーザの再生時の待ち時間を減らすことができるかもしれません。が、ユーザが実際には再生しない場合でもデータを読み込むことになるので、回線やサーバに余計な負荷をかけてしまう場合もあります。ブラウザは設定や回線状況によって、この指定を無視するかもしれません。
"none"を指定した場合は先読みを行わないことを、"metadata"を指定した場合は動画自体ではなく関連する情報（サイズや時間、最初の幾つかのフレームなど）の先読みを、"auto"は動画全体の先読みを指定します。空の文字列（""）を指定した場合は、"auto"を指定したのと同じ意味になります。preloadを指定しなかった場合に先読みをどうするかは、ブラウザによって異なります。
autoplayが指定された場合はページが読み込まれた段階でデータを読み込み再生しようとするため、preload属性の指定には意味がありません。

mediagroup属性は複数の動画や音声を同期再生させるためのものです。各<video>や<audio>のmediagroup属性で同じグループ名を指定することで、別々の動画ファイルや音声ファイルを同期再生させることができます。

字幕などを付けたいときは、<track>要素を子要素にしてWebVTTファイルで指定することができます。

<video>タグに対応しているブラウザでは、ふつう<video>～</video>の内容は表示されません。<object>やテキストなどを入れることにより、<video>で動画を再生できないブラウザでは他の手段で再生させようとしたり、動画ファイル自体のダウンロードリンクのような代替テキストを表示させたりすることができます。
<img>要素のaltによる代替テキストとは異なり、これはアクセシビリティのための仕組みではありません。アクセシビリティを考慮する場合、音声を聞けない人のためには動画データ内や<track>で字幕を提供したり、mediagroupによって手話の動画データを同期させたり、映像が見れない人向けには<track>で音声読み上げ用のテキストデータを提供したり、mediagroupによって音声データを同期させるといった方法があります。