video/audio 要素には再生時間が変わったときに timeupdate イベントが発生します。これは Chrome においては最頻でも 250ms ごとにしか呼ばれません (500ms のときもある)。
もっと頻度をあげてイベントをとりたいと思うことがあったので以下のようにしました。
video.addEventListener('loadedmetadata', function (e) {
var time = video.currentTime;
requestAnimationFrame(function me () {
if (time !== video.currentTime) {
time = video.currentTime;
video.dispatchEvent(new CustomEvent("timeupdate"));
}
requestAnimationFrame(me);
});
});
video.addEventListener('timeupdate', function (e) {
console.log(video.currentTime);
}); requestAnimationFrame で定期的に currentTime を監視して timeupdate を自力で発火させるアプローチです。
元の timeupdate イベントも一応受けとっています。というのも requestAnimationFrame はタブがバックグラウンドにいった場合などに呼ばれる頻度がとても落ちることがあるので、本来のイベントも受けて保険としています。そして「やっぱ高頻度じゃなくてもいいや」となっても該当部分をコメントアウトするだけですみます。
