Javascriptで取得するvideo要素の再生、停止、一時停止

こんにちは。動画を用いたデザインも増えてきて、以前よりもvideo要素を使用したサイトを作ることが多くなった気がします。
今回はJavascriptでキャッチできるvideo要素のイベントでよく使いそうなものをピックアップしてみようと思います

結構細かく取れるので、ここではよく使いそうな一部だけ紹介します。
では、ひとつずつ見て行きましょう。

★再生準備ができたに発生する「canplaythrough」
このイベントはざっくり言うと「動画のストリーミングのための読み込みもだいたい終わって、再生中に止まることは多分ないよ！」っていう準備完了を知らせてくれるイベントです。あくまで推定と書いてあるのが若干気になりますが…。

var video=document.getElementById('任意のvideoタグのid');
video.addEventListener('canplaythrough', function(){
  console.log('動画の準備が完了しました');
}, true);

★再生時に発生する「play」
まんま書いてあるように再生をキャッチするイベントです。
一時停止から再び再生した場合にも発生します。

var video=document.getElementById('任意のvideoタグのid');
video.addEventListener('play', function(){
  console.log('再生しました');
}, true);

★一時停止中を取得する「pause」
動画が一時停止するたびに発生するイベントです。

var video=document.getElementById('任意のvideoタグのid');
video.addEventListener('pause', function(){
  console.log('一時停止');
}, true);

★再生終了を取得する「ended」
動画の再生終了を取得できるイベントです。

var video=document.getElementById('任意のvideoタグのid');
video.addEventListener('ended', function(){
  console.log('再生終了しました');
}, true);

さらに詳しく知りたい方はこちらで確認してみてください。紹介したほかに、エラーや音量関係のものなんかもありますね。

ARAKAZE NOTE