2012/01/10更新

[HTML5] 動画を再生する

HTML5を利用して動画を再生するサンプルページを作ってみました。

http://www.yoheim.net/labo/html5/video/video1.html

videoタグの書き方

HTML5のvideoタグを利用します。ビデオタグの使い方は簡単です。以下のようなHTMLでビデオを表示出来ます。

<video id="video" width="600" height="338" controls>
  <source src="h264_003.mov"></source>
  <source src="theora_003.ogv"></source>
  <p>HTML5 Videoに対応したブラウザでご覧ください</p>
</video>

videoタグとsourceタグ。 sourceを複数設定しているのは、ブラウザによって再生出来る動画の形式が異なるためです。 videoタグにcontrols属性をつける事で、ブラウザネイティブな動画のコントローラーが表示されます。 videoタグに対応していないブラウザには、「HTML5 Videoに対応したブラウザでご覧ください」と表示されます。

videoをJavaScriptから操作する

videoをjavaScriptから簡単に制御することが出来ます。

video.play();
video.pause();
var time = video.currentTime;

ビデオの再生、ポーズ、再生時間の取得が上記のようなコードで簡単に取得出来ます。

参考ページ

videoタグに詳しく書いてあるサイトのURLを記載しておきます。
http://www.html5.jp/tag/elements/video.html