2011/5/18

Videoタグ

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

video タグのサンプル

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

video タグの設置

<video id="video_sample" src="./media/sample.webm" preload="auto" width="480" height="342"> Video タグに対応しているブラウザをご利用下さい。 </video> Time : <span id="video_sample_status">-/-</span><br /> <input type="button" value="play" onclick="video.play()" /> <input type="button" value="loop" onclick="video.loop()" /> <input type="button" value="stop" onclick="video.stop()" />

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で制御するためのサンプルコード

var video = { init : function() { this.media = document.getElementById('video_sample'); this.status = document.getElementById('video_sample_status'); },

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

round : function(v) { v = Math.round(v * 10) / 10; return Math.floor(v) == v ? v + ".0" : v; },

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

setStatus : function() { var cur = this.round(this.media.currentTime); var total = this.round(this.media.duration); if (this.status.innerText) { this.status.textContent = cur + "/" + total; } else if (this.status.innerText) { this.status.innerText = cur + "/" + total; } return cur != total; },

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

counter : function(is_stop) { if (this.timer_id) clearInterval(this.timer_id); if (is_stop) { clearInterval(this.timer_id); this.timer_id = false; } else { var self = this; this.timer_id = setInterval(function() { if (!self.setStatus()) self.counter(true); }, 100); } },

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

play : function() { this.media.currentTime = 0; // 再生位置を先頭に this.media.loop = false; // ループをOFFに this.media.play(); // 再生 this.counter(); },

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

loop : function() { this.media.currentTime = 0; this.media.loop = true; this.media.play(); this.counter(); },

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

stop : function() { this.media.pause(); // 停止 this.counter(true); } }

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