video - 動画を再生

video要素は、ビデオやムービーを再生するために使います。
これにより、FLASHなどのプラグインをインストールせずに、HTML上から画像を配置するのと同様に、シンプルに動画が扱えるようになります。

現在、video要素をサポートしているユーザーエージェントはいくつかあるのですが、、それぞれがサポートされている動画規格が統一されていません。 どの動画規格がHTML5にふさわしいかについての検討はされていますが、推奨される標準規格はまだ未定のままです。
各ベンダーが推奨している動画規格としては、Ogg Theora、H.264などが挙げられますが、 どの規格も技術特許への懸念や、ブラウザベンダー各社の自社サービスとの相性などの問題から、 合意は至っていないようです。

video要素のブラウザ別サポート状況

- ie6 ie7 ie8 ie9 firefox4 chorme safari5 opera10
video - - - -

video要素のHTML4からHTML5への変更点

video要素は、HTML5から新たに追加された要素です

コンテンツ属性

グローバル属性 すべての要素で共通に使える属性。HTML5で新たに定義された属性もあります。
src 動画のURLを指定
poster 動画再生前に、何の動画かヒントになる(最初の)画像
または、ユーザーエージェントが利用できない形式の場合に表示するURL
preload 動画をあらかじめ読み込む、autoplayと同時指定すると無視されます。
・auto - 裏側で動画を収録(初期値)
 ユーザーの動画をすばやく見たいというニーズを最優先したい場合など
・metadata - 予めメタデータのみ取得
 動画のサイズ・最初のフレーム・トラックリスト・再生時間などの動画のメタデータのみを取得
・none - 予め取得しない
 動画の利用率が低いとわかっている、トラフィックを最小限にしたい、ウェブサーバに余分な負担を掛けたくない場合
autoplay 動画を自動再生
ウェブページを読み込んだ時点で、動画が自動再生
loop ループ再生を指定
動画が最後まで到達したら、開始位置に戻ります
controls 動画コントロールのインターフェースを表示
スクリプトを使った動画コントローラを用意しなくても、 ユーザーエージェント側で開始、停止、一時停止、一時停止解除、音量のミュートなどの インターフェースを表示
width 動画の幅を指定
height 動画の高さを指定
各主要ユーザーエージェントとビデオ:コーディックの対応表
- Ogg Theora     H.264     VP8(WebM)
IE - 9.0+ -
Firefox - 4.0+
Google Chrome
Safari - -
Opera -

「基本」のサンプル

HTMLコード

<video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp4" controls>

プレビュー

対応していないブラウザでは正しくプレビューされません。

別ウィンドウで「基本」のサンプルプレビューを確認

「自動再生」のサンプル

HTMLコード

<video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp4" controls autoplay>

プレビュー

対応していないブラウザでは正しくプレビューされません。

別ウィンドウで「自動再生」のサンプルプレビューを確認

「再生前のヒント画像」のサンプル

HTMLコード

<video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp4" controls poster="http://nekodama.sakura.ne.jp/images/webdev/html/example.jpg">

プレビュー

対応していないブラウザでは正しくプレビューされません。

別ウィンドウで「再生前のヒント画像」のサンプルプレビューを確認

「source要素を利用した指定」のサンプル

HTMLコード

<video controls autoplay>
 <source src="http://www.youtube.com/demo/google_main.mp4" type="video/mp4; codecs=avc1.42E01E, mp4a.40.2">
</video>

プレビュー

対応していないブラウザでは正しくプレビューされません。

別ウィンドウで「source要素を利用した指定」のサンプルプレビューを確認

原文(英語):(http://www.w3.org/TR/2010/WD-html5-20100304/video.html#video)