Chromeのイベントがとばなくなってしまうケースの事例

再生している時にいろいろな都合でイベントが飛ばなくなる

Netflixとかでもやってるらしいですが、ユーザーの操作がない状態で動画再生とかしつづけた場合、動画のイベントなどがブラウザからとんでこなくなることがあります
(例えばloadeddataとかcanplaythroughとか)
以下は上記の対処例です

eventがとんでこなくなる理由

• tab sleepしてる
• lockしてる
  のとりあえず2つ

tabがsleepする?

chrome://discards
のページごとのAuto Discardableを無効にする

Lockを無効にする

https://developer.chrome.com/docs/capabilities/web-apis/wake-lock?hl=ja
このあたりに書いてあるやつです

const requestWakeLock = async () => {
  try {
    wakeLock = await navigator.wakeLock.request();
    wakeLock.addEventListener('release', () => {
      console.log('Screen Wake Lock released:', wakeLock.released);
    });
    console.log('Screen Wake Lock released:', wakeLock.released);
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

await requestWakeLock()

const handleVisibilityChange = () => {
      if (document.visibilityState === 'visible') {
        requestWakeLock()
      }
}
document.addEventListener('visibilitychange', handleVisibilityChange)

tabを切り替えしたり、browserを最小化したりするとwake lockは解除されてしまうので、そこは考慮します