video/audio 要素の timeupdate イベントを高頻度にする
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 はタブがバックグラウンドにいった場合などに呼ばれる頻度がとても落ちることがあるので、本来のイベントも受けて保険としています。そして「やっぱ高頻度じゃなくてもいいや」となっても該当部分をコメントアウトするだけですみます。
関連エントリー
- UVC (USB Video Class) のプロトコルと勘所 手元にある UVC デバイスの構成を dot で書きだして graphviz してみたのがこれ。イメージしやすいかな? https://ww...
- AngularJS の ngResource を既存APIの仕様にあわせる AngularJS には ngResource という拡張があって、サーバに対する API 経由の CRUD 的操作を JavaScript...
- Spring MVC で @Async と @RequestScope を共存させるには? @Async と @RequestScope を同時につかうとどうなるか @RequestScope、これは @Scope(value = ...
- LAN 内の mDNS に応答するホストを列挙したい PTR _services._dns-sd._udp.local. A/AAAA [ソースアドレス].in-addr.arpa. をやりたい...
- node.js で git の blob sha1 を求める github の API とかに出てくる "sha" は git 的な sha1 で、ファイルの内容のみからとった sha1 ではない。なん...