Webページが表示されているかを判定

ユーザーにページが表示されているかを判定するPage Visibility APIのメモ。
主に、使用用途としては、ユーザーがページを場合に、動画や重たいアニメーションの再生を停止したい時などに使用する。
プロパティはDocument.hiddenもしくはDocument.visibilityStateがあり、イベントのDocument.onvisibilitychangeで処理する。

const video = document.getElementById('video');
document.addEventListener('visibilitychange', function () {
  console.log(document.visibilityState);
  //コンソールにはhiddenとvisibleが表示される。
  console.log(document.hidden);
  //コンソールにはtrueとfalseが表示される。

  if (document.hidden) {
    console.log('動画は一時停止します。');
    video.pause();
  } else {
    console.log('再生します。');
    video.play();
  }
});

ユーザが別のタブに切り替えたり、最小化したりすると実行する。タブを横に並べた場合、そちらにフォーカスしても、実行せず、モニターに映っているかどうかを判定している。

余談ですが、動画ってvideo.play()単体では再生できないですね。最初にユーザーに再生してもらう必要があります。

参考