HTML5 Video
最新のウェブサイトの多くは、ビデオを表示しています。 HTML5は、ビデオを再生するための標準を提供します。
ブラウザが、HTML5 video をサポートしているかどうかをチェックしてください
Web における動画
これまでは、web ページで動画を見るための標準がありませんでした。
今日、ほとんどの動画は、(フラッシュのような)プラグインを通して見ています。
しかし、すべてのブラウザに、同じプラグインがあるというわけではありません。
HTML5は、Web ページ上にビデオ/ムービーを埋め込むための標準的な方法を指定する、
新しい要素：<video>要素：を定義しています。
ブラウザ･サポート
Internet Explorer 9、Firefox, Opera、Chrome、Safari は、<video> 要素をサポートしています。
注: Internet Explorer 8 以前のバージョンは、<video> 要素をサポートしていません。
HTML5 Video - どうのように動作するか
HTML5 で、ビデオを表示するのに必要なのは、次の通りです:
例
<video width="320" height="240" controls="controls">
<source src="/images/movie.mp4" type="video/mp4" />
<source src="/images/movie.ogg" type="video/ogg" />
あなたのブラウザは audio 要素をサポートしていません。
</video>
Try it yourself »
control 属性は、再生、一時停止、ボリュームのような、ビデオコントロールを追加します。
また、常に width 属性と height 属性を含めることをお勧めします。高さと幅が設定されている場合は、
ページがロードされるときに、ビデオのために必要なスペースが予約されます。
これらの属性の指定が無いと、ブラウザはビデオのサイズを認識できないので、適切なスペースを確保する
ことができません。結果、ページレイアウトは（ビデオの）ロード中に変更されることになります。
また、<video> 要素をサポートしていないブラウザのため、<video> と </video>
タグの間に、テキストコンテンツを挿入する必要があります。
<video> 要素には、複数の <source> 要素の設定が可能です。
<source> 要素は、さまざまなビデオファイルにリンクすることができます。
ブラウザは、最初に認識した形式を使用します。
ビデオ・フォーマットとブラウザ・サポート
現在、<video> 要素のサポートしているフォーマットは、MP4、WEBM、Ogg の 3 種類です:
| ブラウザ |
MP4 |
WebM |
Ogg |
| Internet Explorer 9 |
YES |
NO |
NO |
| Firefox 4.0 |
NO |
YES |
YES |
| Google Chrome 6 |
YES |
YES |
YES |
| Apple Safari 5 |
YES |
NO |
NO |
| Opera 10.6 |
NO |
YES |
YES |
- MP4 = H.264 ビデオコーデックと AAC 音声コーデックによる MPEG4 ファイル
- WebM = VP8 ビデオコーデックと Vorbis 音声コーデックによる WebM ファイル
- Ogg = Theora ビデオコーデックと Vorbis 音声コーデックによる Ogg ファイル
HTML5 video タグ
| タグ |
説明 |
| <video> |
ビデオや映画を定義する |
| <source> |
<video> や <audio> などのメディア要素へ複数のメディア資源を定義する |
| <track> |
mediaplayer のテキストトラックを定義する |
|