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

ボリューム／再生時間の表示

　サンプル1のビデオプレーヤーに機能を追加しましょう。以下のボタンと処理を追加します。

• ミュートボタン
• フルスクリーンボタン
• ボリューム調整スライダー
• 再生時間の表示

　これらのボタンや表示領域を以下のようにHTMLで定義します。

<div id="control">
<img src="images/play.png" id="playButton" width="32" height="32"><!--
--><img src="images/volume.png" id="volumeButton" width="32" height="32"><!--
--><img src="images/fullscreen.png" id="fsButton" width="32" height="32">
<div id="ctime">00:00/00:00</div>
</div>
<div id="slider"></div>
<div id="volumeSlider"></div>

　順番にスクリプトを見ていきましょう。ミュートボタンはクリックする度に音を消す／出すを繰り返します。ミュートはmutedプロパティで設定でき、trueならミュート、falseならミュートを解除します。処理自体は再生ボタンとほとんど同じで、以下のようになります。

// ミュートボタンの処理
$("#volumeButton").click(function(){
if (videoEle.muted){
videoEle.muted = false;   // 通常の音量にする
$(this).attr("src", "images/volume.png");
}else{
videoEle.muted = true;  // ミュートする
$(this).attr("src", "images/mute.png");
}
});

　フルスクリーン（全画面表示）ボタンはSafariのみ有効な機能です。SafariではwebkitEnterFullscreen()メソッドを使うとフルスクリーンで映像を再生できますが、他のブラウザーではエラーになってしまうので、以下のようにtry...catchを使って囲んでから（エラー回避処理をしてから）呼び出します。

$("#fsButton").click(function(){
try{
videoEle.webkitEnterFullscreen(); // フルスクリーンモード
}catch(e){}
});

　ボリューム調整スライダーは、前に説明した再生スライダーと同じくslider()で設定します。ボリュームはvolumeプロパティで調整でき、0〜1.0までの範囲で設定します。0なら無音、1なら最大音量です。デフォルトで最大音量にするならvalueに100を、中程度の音量なら50を設定します。

$("#volumeSlider").slider({
value : 100,
slide : function(event, ui){
videoEle.volume = ui.value/100;
}
});

　再生時間は、timeupdateイベントが発生したときに現在の時間と映像の長さを組み合わせて表示します。

document.getElementById("ctime").innerHTML = toTimeStr(cTime)+"/"+toTimeStr(dTime);

　このとき、01:04のように値が常に2桁になるようにします。ここでは与えられた時間をmm:ss形式にするtoTimeStr関数を用意しました。この関数は以下のようになっており、時間をパラメーターとして渡すとmm:ss形式の文字列に変換し返します。

function toTimeStr(n){
var m = "00"+Math.floor(n / 60);    // 秒を分にする
var s = "00"+Math.floor(n % 60);    // 秒のみにする
m = m.substr(m.length-2, 2);    // 2桁の数値にする
s = s.substr(s.length-2, 2);    // 2桁の数値にする
return m+":"+s;
}

　以上で、各種ボタンが追加されました（サンプル2）。ついでにスライダーバーを赤色にして、よりYouTubeに近づけましょう（サンプル3）。あらかじめ赤色の画像を用意し、以下のCSSセレクターの背景画像として設定します。画像の色を変えれば色は簡単に変更できます。GIFアニメーションを利用してゆっくり色が変化するようにしても面白いでしょう。

#slider.ui-widget-content {
background-image: url(red.png);
}

ボリュームボタンなどが追加された

ミュートボタンはクリックすると消音できる

Safariではフルスクリーンボタンをクリックするとフルスクリーンで映像が再生される

スライダーのバーを赤色に設定した

■Amazon.co.jpで購入

• 

  HTML5+JavaScript アイデア＆実践サンプル (WEB PROFESSIONAL)古籏一浩(著)アスキー・メディアワークス