2012/01/10更新

[HTML5] 動画を再生する

このエントリーをはてなブックマークに追加            

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

f:id:yoheiM:20110401233719p:image

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







こんな記事もいかがですか?

RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。