2011/5/18

Videoタグ

今までWebでビデオといえば、Flashの独壇場でしたが、HTML5 では、HTMLとJavascriptのみで 手軽にビデオ再生を扱うことが可能になりました。

video タグのサンプル

以下、Video を Javascript で制御するサンプルとなります。
動画はGoogle社のWebMにてエンコードしたものです。
WebMは、Firefox4、Opera、Google Chrome にて標準対応しています。
それ以外のブラウザ(Safari、IE9)に関しては、Google社がプラグインを提供する予定となっています。
対応ブラウザ:opera、chrome

Time : -/-

video タグの設置

src
ビデオデータのURLを指定します。
属性として指定するのではなく、<source>xxx.avi</source> のように、video タグの内部の要素として記述することで、複数データの指定が可能です。
(これは、あくまで再生候補という意味で、複数の動画を再生するわけではありません。記述された順に再生可能なデータを利用するという意味のものです。)
poster
ブラウザ側がビデオデータを再生できない状態の際に、ビデオ再生の変わりに表示する画像URLを指定します。
width
要素の幅を指定します。
height
要素の高さを指定します。
src
オーディオファイルのURLを指定します。
loop
オーディオの再生が完了したら、最初に戻ってループ再生を実行します。
autoplay
指定された場合、オーディオを自動再生します。
controls
再生・停止・ボリュームの調整を行うためのパネルを表示します。(表示はブラウザの実装に依存します。)
preload
ブラウザの挙動を制御するための属性です。
指定可能な値は none, metadata, auto のどれかです。
none
再生されるまでデータのダウンロードを行わない。
metadata
コンテンツのメタ情報が格納されている部分だけをダウンロードする。
auto
事前にできるだけダウンロードする。

Video をJavascriptで制御するためのサンプルコード

この関数は、ページがロードされた後に実行し、予め操作する要素を取得しておくためのものです。
ビデオ要素の取得と、再生状態を表示する要素(id = video_sample_status) を取得しています。

再生時刻の丸め処理を行っています。

再生中のビデオの位置(currentTime プロパティ)と、ビデオの長さ(duration プロパティ) を取得し、それぞれを表示用に値を丸めて、状態表示要素のテキストにセットしています。
戻り値は、再生完了かどうか判定した結果です。

setInterval 関数を使用して、0.1 秒毎に再生状態の要素を更新するための処理を記述しています。
再生が完了したら、setInterval のタイマーを clearInterval で動作しないようにしています。

再生開始位置を先頭にセットし、再生時のループをOFFにしてから play 関数を呼び出して、動画を開始させています。

再生開始位置を先頭にセットし、再生時のループをONにしてから、play 関数を呼び出して、動画を開始させています。

pause 関数を呼び出して、動画の再生を停止させています。

この記事に関するお問い合せ

株式会社クーシー 担当:三上
TEL:019-656-0003 E-mail:mikami@coosy.co.jp

HTML5の研究活動一覧へ戻る
COOSY Inc. Head Office : F Nissei Ebisu Bldg.7F 3-16-3 Higashi Shibuya-ku,Tokyo,Japan Laboratory : IPU Innovation Center 2-7, 152-409 Sugo Takizawa-shi,Iwate,Japan

Top of Page