HTML5でFlash不要のYouTube作ってみた (4/7)

2011年02月23日　10時00分更新

文●古籏一浩

ツイートする

スライダーの処理

　HTMLの準備が整ったので、再生処理とスライダー処理をするスクリプトを作成しましょう。

　まず、制御対象とする映像(video要素)にアクセスしやすくするため、変数videoEleにvideoへの参照を入れておきます。jQueryの$()では余計な処理が入り速度が低下しますし、$()を使わないといけないブラウザー間の差異はないので、このようにしてあります。

var videoEle = document.getElementById("myVideo");

　次に、$("#slider").slider()としてスライダーを生成します。このままだとスライダーが生成されるだけですので、スライダーがドラッグされたらそれに合わせて映像の再生時間を変更する処理を作ります。

　jQuery UIのスライダーはスライドのつまみ部分(Thumb)をドラッグした場合にslideイベントが発生します。そこでslideイベントが発生したときに、スライドのつまみの位置を元に再生する映像のフレームを設定します。

　slideイベントが発生すると呼び出される関数（イベントハンドラ）には2つのパラメーターが渡されます。最初のパラメーターがイベントオブジェクト、2番目のパラメーターがスライダー情報です。スライダーがどの値を示しているかは2番目のパラメーターのvalueプロパティに入っています。スライダーの値はデフォルトでは0〜100までになります。

　スライダーの値は0〜100、つまり0〜100%と考えると、この値と映像の長さを乗算すると再生すべき映像フレームを求められます。映像の再生フレームはcurrentTimeプロパティに再生時間を指定して設定します。以下のようにするとスライダーに合わせた映像フレームを表示できます。

videoEle.currentTime = ui.value/100 * videoEle.duration;

　フレームを設定したらpause()メソッドを使って一時的に映像の再生を止め、停止したことを示すために再生ボタンの画像を入れ替えます。

videoEle.pause();
$("#playButton").attr("src", "images/play.png");

　スライダー部分をまとめて定義したのが以下のスクリプトになります。

$("#slider").slider({
slide : function(event, ui){
videoEle.currentTime = ui.value/100 * videoEle.duration;
videoEle.pause();
$("#playButton").attr("src", "images/play.png");
}
});

再生ボタンの処理

　続いて再生ボタンの処理を作りましょう。再生ボタンはクリックされるたびに「再生」と「停止」を繰り返します。HTML5 Videoではpausedプロパティの値がtrueなら停止中、falseなら再生中という具合にビデオの再生状態を調べられます。クリックされた時点で映像が再生中かを判定して、停止中ならplay()、再生中ならpause()を実行します。

　クリックに合わせてボタンの画像も切り換えます。再生ボタンの処理をまとめると以下のようになります。画像は$(〜).attr()のようにattr()を使って入れ替えます。attr()は属性値を設定するメソッドで、最初のパラメーターに属性名、2番目のパラメーターに設定値を指定します。

$("#playButton").click(function(){
if (videoEle.paused){
videoEle.play();    // 再生する
$(this).attr("src", "images/pause.png");
}else{
videoEle.pause(); // 一時停止する
$(this).attr("src", "images/play.png");
}
});

　次に、映像が最後まで再生されたときに再生ボタンの画像を入れ替える処理を作ります。再生が終了するとendedイベントが発生しますので、endedイベントが発生したら以下のスクリプトで画像を入れ替えます（ちなみに、繰り返し再生するように設定しているとendedイベントは発生しません）。

videoEle.addEventListener("ended", function(){
$("#playButton").attr("src", "images/play.png");
}, true);

　再生している映像の時間に合わせて、スライダーのつまみ部分(Thumb)も動かしましょう。映像の再生中、異なる映像フレームに移動するとtimeupdateイベントが発生します（イベントの発生間隔はブラウザーによって異なります）。

　スライダーの値は$("#slider").slider("value", 設定値)のようにして設定します。設定値は現在の映像の再生時間(currentTime)を映像の長さ(duration)で除算し、100を乗算したものです。

　実際のスクリプトの処理は以下のようになります。

videoEle.addEventListener("timeupdate", function(){
var cTime = videoEle.currentTime; // 現在再生されている時間
var dTime = videoEle.duration;  // 映像の長さ
$("#slider").slider("value", cTime / dTime * 100);
}, true);

　ここまでをまとめたのがサンプル1の「player.js」です。スライダーのつまみを動かすと、動きに合わせて映像も変化していきます。また、映像の再生フレームに合わせてスライダーのつまみ部分も移動するのが分かります。

スライダーのつまみ部分をドラッグしても映像フレームが切り替わる

■サンプル1[JavaScript:player.js]

$(function(){
var videoEle = document.getElementById("myVideo");
// 再生時間を指定するスライダーの処理
$("#slider").slider({
slide : function(event, ui){
videoEle.currentTime = ui.value/100 * videoEle.duration;
videoEle.pause();
$("#playButton").attr("src", "images/play.png");
}
});
// 再生ボタンの処理
$("#playButton").click(function(){
if (videoEle.paused){
videoEle.play();    // 再生する
$(this).attr("src", "images/pause.png");
}else{
videoEle.pause(); // 一時停止する
$(this).attr("src", "images/play.png");
}
});
// 映像が再生されている時の処理
videoEle.addEventListener("timeupdate", function(){
var cTime = videoEle.currentTime; // 現在再生されている時間
var dTime = videoEle.duration;  // 映像の長さ
$("#slider").slider("value", cTime / dTime * 100);
}, true);
// 映像の再生が終了した時の処理
videoEle.addEventListener("ended", function(){
$("#playButton").attr("src", "images/play.png");
}, true);
});