はじめに
JavaScriptの処理を初めて記述した。さらに、addEventListener()と組み合わせて、タイマーをスタートして、状態が遷移したらタイマーを止めるという処理を作成した。今後も使うことがあると感じたため、メモを残したい。同じようなことをしたい方の参考になれば幸いである。
やりたいこと
JavaScriptでサイトに挿入した動画が何割が再生されたかをリアルタイムで計算して出力したい。apiで動画が再生された、止まったなどの状態と長さ、現在の再生位置は取得できる。長さ、現在の再生位置から再生された割合を計算する。動画は画面の読み込み時に自動で再生される。
実現方法
addEventListenerとsetIntervalを用いた。タイマー処理を画面の読み込みと同時にスタートする。apiで動画の状態を取得し、動画の再生が完了していたら処理を停止する。今回は1秒ごとに再生された割合を表示をする。
処理の流れ
諸事情でイベント名や変数名は実際のものと異なるものでメモを書く。処理の流れのイメージが伝わればと思う。
①タイマー処理を始める。
ratio = currentTime / TotalTime; //現在の再生位置 ÷ 全体の長さ。それぞれapiで取得
let timer = setInterval(console.log(ratio), 1000);
②動画の再生が完了したかを取得し、タイマー処理を取り消す
//動画オブジェクト.addEventListner(動画の再生が完了されたイベント名, やりたいこと);
video.addEventListner("done", function(){
clearInterval(timer);
})
ひとこと
処理を始めるべきイベントを取得→タイマーを設定→タイマー処理→処理を終えるべきイベントを取得→完了という流れは今後も使いそうだと思った。「普通はこのように書く」や「より良い書き方はこうだ」みたいなのを見つけたら、改めて記事を書きたい。