JavaScriptでタイマー処理とイベントリスナーを組み合わせて使う - Qiita

はじめに JavaScriptの処理を初めて記述した。さらに、addEventListener()と組み合わせて、タイマーをスタートして、状態が遷移したらタイマーを止めるという処理を作成した。今後も使うことがあると感じたため、メモを残したい。同じようなことをしたい方の参考になれば幸いである。 やりたいこと JavaScriptでサイトに挿入した動画が何割が再生されたかをリアルタイムで計算して出力したい。apiで動画が再生された、止まったなどの状態と長さ、現在の再生位置は取得できる。長さ、現在の再生位置から再生された割合を計算する。動画は画面の読み込み時に自動で再生される。 実現方法 addEventListenerとsetIntervalを用いた。タイマー処理を画面の読み込みと同時にスタートする。apiで動画の状態を取得し、動画の再生が完了していたら処理を停止する。今回は1秒ごとに再生され