2013年07月20日

video.jsを使って、iOSで映像を開始位置と終了位置を指定して再生(区間再生)させる

このエントリーをはてなブックマークに追加
開始位置と終了位置を指定した再生をここでは「区間再生」と呼ぶことにします。ある映像の25秒目から10秒分再生する、ある映像の3分55秒から4分10秒まで再生する、といった感じですね。この区間再生をiOSでプログレッシブダウンロードで実行するサンプルをVideo.jsを使って作ってみました。
smartphone.jpg
ちなみに今回の環境は以下のとおりです。
  • サーバOS:CentOS
  • ビデオライブラリ:Video.js
  • その他「jquery-1.8.2」を利用
  • 映像:mp4ファイル

まずは映像を再生のコントロールをする部分。
function intervalPlay(movFileName, curTime, playTime){

removeListener();

$("#video").remove("source");

$("<source />", {
attr: {
src: movFileName,
type: "application/vnd.apple.mpegurl"
}
}).appendTo(video);

$("#video")[0].load();

$("#video").one("loadedmetadata", function(){
if(curTime > 0) {
$("#video").one("canplaythrough", function() {
$("#video").one("progress", function() {
$("#video")[0].currentTime = curTime;
$("#video").one("seeked", function() {
bindPlaying(curTime, playTime);
$("#video")[0].play();
blnUnbind = false;
});
});
});
} else {
bindPlaying(curTime, playTime);
$("#video")[0].play();
blnUnbind = false;
}
});
}

このfunctionをHTMLファイルから呼び出します。引数は、映像ファイルのURL、開始秒、再生時間の3つを指定します。次に映像を指定秒数だけ再生させる、実際に「区間再生」をさせる部分です。
function bindPlaying(curTime, playTime) {
$("#video").bind("playing", function() {
$("#video").bind("timeupdate", function() {
var vTime = $("#video")[0].currentTime;
if (vTime > (curTime + playTime)) {
blnUnbind = true;
$("#video")[0].pause();
}
});
});

$("#video").bind("pause", removeListener);

}
引数には開始秒と再生時間を指定しています。●秒後にシークさせて、指定した時間(秒数)を再生させるという流れですね。timeupdateで再生されていることを確認しながら、開始秒+再生秒を越えたら映像の再生を一時停止させるロジックです。次に初期化用の関数も記載しておきます。
function removeListener() {
if (!blnUnbind) return;
$("#video").unbind("pause");
$("#video").unbind("timeupdate");
$("#video").unbind("playing");
}
最後にHTMLから呼び出す場合は以下のような感じですね。映像開始から100秒後を開始位置として、10秒間hoge.mp4を再生させるという例になります。
<a href="#" onClick="intervalPlay('./hoge.mp4', 100, 10);">100秒後</a>
今回はMP4をプログレッシブダウンロードで区間再生するという形にしましたが、本当はHLS通信での区間再生を実施したかったんですよね。mp4ファイルを指定したところをm3u8ファイルを指定しただけではシークはうまくいきませんでした。m3u8ファイルの方を再作成するような方法をとった方がよいと推測されます。

また今回の方法はAndroidではうまくいきませんでした。OSのバージョンによるのかもしれませんが、僕の手持ちの端末では、100秒後にシークすることがまずできませんでした。こちらはもう少し調査をする必要がありますね。

posted by motti at 19:36 | スマホ/タブレット | このブログの読者になる | はてなブックマークに追加
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。