前回、html5のvideoタグについて説明しました。
まぁ、videoタグの属性で「controls」を指定すれば再生ボタンとかストップボタンとかブラウザ事につくんですけど、まぁそれは置いといてjavascript側から再生とか停止とかしてみたいのでそれをメモ。cssとか装飾については省きます。
目次
html側でボタンを設定
html側では「再生」「一時停止」「再生速度（早）」「再生速度（遅）」「最初から」というボタンと現在再生されている再生位置（秒数）を表示したいと思います。
とりあえずbuttonタグを利用してそれぞれID名を付けました。現在の再生位置に関しては、ichiというIDを付けてます。＊IDは任意です。
現在の再生位置
Video要素をjavascriptから操作するメソッド
とりあえずjavascriptでvideoタグおよび各種ボタンを変数に入れておきます。videoタグは変数vに入れています。
各処理の説明は後術します。とりあえう全部の処理をして説明すると長くなるので今回のサンプルで使用したところだけ書いていきます。
var v=document.getElementById("v");
var p_btn=document.getElementById("playbtn");
var s_btn=document.getElementById("stopbtn");
var speedup_btn=document.getElementById("speedupbtn");
var speeddown_btn=document.getElementById("speeddownbtn");
var restart_btn=document.getElementById("restartbtn");
//再生させるための処理
p_btn.addEventListener("click",function(){
v.playbackRate=1;
v.play();
},false);
//再生を一時停止させるための処理
s_btn.addEventListener("click",function(){
v.pause();
},false);
//再生速度を早くする処理
speedup_btn.addEventListener("click",function(){
v.playbackRate+=1;
},false);
//再生速度を遅くする処理
speeddown_btn.addEventListener("click",function(){
v.playbackRate-=0.15;
},false);
restart_btn.addEventListener("click",function(){
v.playbackRate=1;
v.currentTime=0;
},false);
//再生し終わったら発生するイベント
v.addEventListener("ended",function(){
document.getElementById("ichi").innerHTML ="再生完了しまいた";
},false);
//リアルタイムに発生するイベント
v.addEventListener("timeupdate",function(){
document.getElementById("ichi").innerHTML = v.currentTime;
}, false);
再生させるための処理
まぁそのまんま再生させるには、playメソッドを利用すれば再生されます。
v.play();
再生を一時停止させるための処理
pauseメソッドを利用すれば一時停止することが出来ます。
v.pause();
再生速度を早くする処理
video要素のplaybackRateプロパティの数値を上げることで再生速度を早くすることができます。
どうやらInternet Explorerでは、playbackRateが最大8倍速に制限されているようです。
//ボタンをクリックするたびに再生測度を1づつ上げる
v.playbackRate+=1;
再生速度を遅くする処理
video要素のplaybackRateプロパティの数値を下げることで再生速度を早くすることができます。
標準の再生測度は１なので、基本的には、0~1の間で下げていくと再生測度が遅くなります。負の値に設定されるとInternet Explorer9では0に丸められて再生が一時停止になるようで、Internet Explorer10の場合は逆再生されるようです。（未検証）
googleのChromeでも下げていったら一時停止されたので、あまり逆再生は期待できないですね。
// クリックするたびに再生測度を0.15づつ遅くする
v.playbackRate-=0.15;
再生速度を遅くする処理
video要素のplaybackRateプロパティの数値を下げることで再生速度を遅くすることができます。
標準の再生測度は１なので、基本的には、0~1の間で下げていくと再生測度が遅くなります。負の値に設定されるとInternet Explorer9では0に丸められて再生が一時停止になるようで、Internet Explorer10の場合は逆再生されるようです。（未検証）
googleのChromeでも下げていったら一時停止されたので、あまり逆再生は期待できないですね。
// クリックするたびに再生測度を0.15づつ遅くする
v.playbackRate-=0.15;
現在の再生位置を取得する処理
現在の再生位置を知りたい場合は、currentTimeプロパティで取得できます。サンプルの場合はリアルタイムで再生位置を取得してinnerHTMLで表示させています。
v.currentTime;
Video要素をイベントを調べてみた
全部のイベントは試しませんので、そこは悪しからず（笑）
再生し終わったら発生するイベント
ended イベント：ビデオが最後まで再生された時に発生するイベントです。
v.addEventListener("ended",function(){
document.getElementById("ichi").innerHTML ="再生完了しまいた";
},false);
再生中に発生するイベント
timeupdate イベント：現在の再生位置が変更された時に発生します。つまり再生されてる時は再生位置が変更されてるので。
v.addEventListener("timeupdate",function(){
document.getElementById("ichi").innerHTML = v.currentTime;
}, false);
他のイベントの種類は下記の図です。
| イベント名 | イベントの内容 |
|---|---|
| loadstart | Videoデータの読み込みを開始した時 |
| progress | Videoデータの読み込み中の時 |
| suspend | 全体は読み込めていないが、読み込みを一時休止している時 |
| abort | Videoデータの読み込みが完了する前に、エラーが原因ではなく読み込みを中断した時 |
| error | Videoデータの読み込み中にエラーが発生した時 |
| emptied | 読み込みエラーなどで、読み込みデータが空となった時 |
| stalled | Videoデータを読み込もうとしているが、予期しない理由で読み込めない時 |
| loadedmetadata | メタデータの読み込みが完了して、データの長さと大きさが決まってテキストトラックの準備が出来た時 |
| loadeddata | データを現在の再生位置で描画できる状態になった初回の時 |
| canplay | Videoデータの再生を再開することができるが、 いま再生を再開すれば、現在の再生レートで最後まで再生できず、途中でバッファリングのために停止すると推定される時 |
| canplaythrough | いま再生を再開すれば、現在の再生レートで最後まで再生できて、途中でバッファリングのために停止することはないと推定される時 |
| playing | 一時停止した後、または、Videoデータの不足で遅延した後で、再生を再開する準備ができた時 |
| waiting | 次のフレームが利用できないため再生停止しているが、やがてそのフレームが利用できるようになるのを待っている時 |
| seeking | シーク（再生位置への移動）中の時 |
| seeked | シーク（再生位置への移動）が完了した時 |
| ended | Videoデータのリソースの末尾に達して、再生が停止した時 |
| durationchange | duration属性（Videoデータの長さ、再生継続時間）が更新された時 |
| timeupdate | 現在の再生位置が変更された時 |
| play | 再生中の時 |
| pause | 一時停止中の時 |
| ratechange | Videoデータの再生レートが変更された時 |
| volumechange | ボリューム、または、ミュートが変更された時 |
こちらのサイトも参考にさせていただきました。
「JavaScript を使って HTML5 ビデオ プレーヤーを制御する (Windows)」
参照元は「video要素、audio要素をJavaScriptから操作する－HTML5のAPI、および、関連仕様」です。
