2011-04-01

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

http://html5learner.appspot.com/html/video/video1.html

videoタグの書き方

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

<video id="video" width="600" height="338" controls>
  <source src="h264_003.mov"></source><!-- Safari用とか -->
  <source src="theora_003.ogv"></source><!-- Chrome用とか -->
  <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