JavaScriptで動画コンテンツを操作してみた!

javascript

前回、html5のvideoタグについて説明しました。

まぁ、videoタグの属性で「controls」を指定すれば再生ボタンとかストップボタンとかブラウザ事につくんですけど、まぁそれは置いといてjavascript側から再生とか停止とかしてみたいのでそれをメモ。cssとか装飾については省きます。

html側でボタンを設定

html側では「再生」「一時停止」「再生速度(早)」「再生速度(遅)」「最初から」というボタンと現在再生されている再生位置(秒数)を表示したいと思います。

とりあえずbuttonタグを利用してそれぞれID名を付けました。現在の再生位置に関しては、ichiというIDを付けてます。*IDは任意です。 

Video要素をjavascriptから操作するメソッド

とりあえずjavascriptでvideoタグおよび各種ボタンを変数に入れておきます。videoタグは変数vに入れています。

各処理の説明は後術します。とりあえう全部の処理をして説明すると長くなるので今回のサンプルで使用したところだけ書いていきます。

再生させるための処理

まぁそのまんま再生させるには、playメソッドを利用すれば再生されます。

再生を一時停止させるための処理

pauseメソッドを利用すれば一時停止することが出来ます。

再生速度を早くする処理

video要素のplaybackRateプロパティの数値を上げることで再生速度を早くすることができます。

どうやらInternet Explorerでは、playbackRateが最大8倍速に制限されているようです。

再生速度を遅くする処理

video要素のplaybackRateプロパティの数値を下げることで再生速度を早くすることができます。

標準の再生測度は1なので、基本的には、0~1の間で下げていくと再生測度が遅くなります。負の値に設定されるとInternet Explorer9では0に丸められて再生が一時停止になるようで、Internet Explorer10の場合は逆再生されるようです。(未検証)

googleのChromeでも下げていったら一時停止されたので、あまり逆再生は期待できないですね。

再生速度を遅くする処理

video要素のplaybackRateプロパティの数値を下げることで再生速度を遅くすることができます。

標準の再生測度は1なので、基本的には、0~1の間で下げていくと再生測度が遅くなります。負の値に設定されるとInternet Explorer9では0に丸められて再生が一時停止になるようで、Internet Explorer10の場合は逆再生されるようです。(未検証)

googleのChromeでも下げていったら一時停止されたので、あまり逆再生は期待できないですね。

現在の再生位置を取得する処理

現在の再生位置を知りたい場合は、currentTimeプロパティで取得できます。サンプルの場合はリアルタイムで再生位置を取得してinnerHTMLで表示させています。

Video要素をイベントを調べてみた

全部のイベントは試しませんので、そこは悪しからず(笑)

再生し終わったら発生するイベント

ended イベント:ビデオが最後まで再生された時に発生するイベントです。

再生中に発生するイベント

timeupdate イベント:現在の再生位置が変更された時に発生します。つまり再生されてる時は再生位置が変更されてるので。

他のイベントの種類は下記の図です。

イベント名 イベントの内容
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、および、関連仕様」です。