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

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

文●古籏一浩

ツイートする

サムネイルの処理

　次に、画面の右側に映像のサムネイルを表示し、クリックされたら該当する映像を再生するようにします。サムネイルは以下のようにプレイリストとして画像を並べておきます。スクリプトで処理しやすくするため、再生する映像ファイル名から拡張子を取り除いた名前をtitle属性に入れます。

<div id="playList">
<img src="thumbnail/fireworks.jpg" width="192" height="108" title="fireworks"><br>
<img src="thumbnail/hachibuse.jpg" width="192" height="108" title="hachibuse"><br>
<img src="thumbnail/rice.jpg" width="192" height="108" title="rice"><br>
<img src="thumbnail/sample.jpg" width="192" height="108" title="sample"><br>
<img src="thumbnail/suimon.jpg" width="192" height="108" title="suimon"><br>
<img src="thumbnail/tatsuno.jpg" width="192" height="108" title="tatsuno"><br>
</div>

　サムネイルがクリックされたら該当する映像を読み込みます。映像ファイル名はtitle属性に入れてありますので、以下のようにして読み出せます。

var videoName = $(this).attr("title");

　このままファイル名を指定して読み込ませたいところですが、ブラウザーによって対応しているコーデックが異なるため少し工夫が必要です。canPlayType()を使って再生できる映像形式を調べ、対応している形式の拡張子を追加します。映像の再生が可能な場合、canPlayType()はmaybeの文字を返します。maybeの文字が返された場合のみ、ファイル名に対応する拡張子を追加します。

var mimeTypeList = ["video/webm", "video/ogg", "video/mp4"];
var mimeTypeExt = [".webm", ".ogv", ".mov"];
for(var i=0; i<mimeTypeList.length; i++){
if(videoEle.canPlayType(mimeTypeList[i]) == "maybe"){ videoName += mimeTypeExt[i]; break; }
}

　あとは、src属性に読み込む映像ファイル名を指定した後、load()を実行すると自動的に映像データが読み込まれます。なお、指定した映像データがすべて読み込まれるかどうかはブラウザーによって異なるため、再生ボタンをクリックしても再生までに少し時間がかかる場合もあります。

videoEle.src = "movie/"+videoName;
videoEle.load();

　ここまでをまとめたのが以下のスクリプトです（サンプル4）。

$("#playList img").click(function(){
var mimeTypeList = ["video/webm", "video/ogg", "video/mp4"];
var mimeTypeExt = [".webm", ".ogv", ".mov"];
var videoName = $(this).attr("title");  // title属性にファイル名が入っているので読み出す
for(var i=0; i<mimeTypeList.length; i++){
if(videoEle.canPlayType(mimeTypeList[i]) == "maybe"){ videoName += mimeTypeExt[i]; break; }
}
videoEle.src = "movie/"+videoName;  // 読み込むファイル名(URLも可)を指定
videoEle.load();    // 映像データを読み込み
$("#playButton").attr("src", "images/play.png");    // 再生ボタン再設定
$("#slider").slider("value", 0);    // 0秒にリセット
});