HTML5 の前までは、Web ページにビデオを表示するための標準はありませんでした。
HTML5 の前までは、ビデオはプラグイン（フラッシュのような）でのみ再生することができました。
HTML5 <video> 要素は、Web ページにビデオを埋め込むための標準的な方法を定めました。
表中の数字は、完全に <video> 要素をサポートした最初のブラウザのバージョンを表しています。
| 要素 | |||||
|---|---|---|---|---|---|
| <video> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
HTML でビデオを表示するには、 <video> 要素を使用します：
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
controls 属性は、再生、一時停止、音量のようなビデオコントロールを追加します。
常に、width と height 属性を指定することをお勧めします。
高さと幅を指定しない場合、ビデオのサイズが分かりません。その結果、ビデオをロード中にページが変わるか、または、ちらつきます。
<video> と </video> タグの間のテキストは、<video>要素をサポートしていないブラウザにのみ表示されます。
複数の <source> 要素は、異なる種類のビデオファイルにリンクすることができます。 ブラウザは、最初に認識したフォーマットを使用します。
自動的にビデオを開始するには、autoplay 属性を使用します：
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
autoplay 属性は、Safari と Opera、または iPad や iPhone のようなモバイルデバイスでは動作しません。
現在、<video> 要素がサポートするビデオフォーマットは、次の3種類です：MP4、WebM および Ogg：
| ブラウザ | MP4 | WebM | Ogg |
|---|---|---|---|
| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | NO | NO |
| Opera | YES (from Opera 25) | YES | YES |
| ファイルフォーマット | メディアタイプ |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
HTML5 は、<video> 要素の DOM メソッド、プロパティおよびイベントを定義しています。
これは、再生時間や音量を設定するだけでなく、ビデオのロード、再生、一時停止を可能にします。
ビデオが再生を開始したときや一時停止されたときなどに、通知することができる DOM イベントもあります。
完全な DOM リファレンスは、HTML5 Audio/Video DOM リファレンスをご覧ください。
| タグ | 説明 |
|---|---|
| <video> | ビデオまたは映画を定義します |
| <source> | <video> や <audio> のようなメディア要素に複数のメディアリソースを定義します |
| <track> | メディアプレーヤにテキストトラックを定義します |