Page Visibility API Demo

注意:如果您的浏览器不支持Referrer策略,则在某些情况下,无法播放音频(源站防盗链)

Page Visibility API用于检测页面的可见性,可以使用document.visibilityState获取当前页面的可见性。

document.visibilityState有四个值:

  1. hidden
  2. visible
  3. prerender
  4. unloaded

在以下情况时,值为hidden:

在页面可见时,值为visible

在页面的父级页面不可见时,值可以为prerender(该属性为可选的)

在文档卸载时,值应为unloaded(该属性为可选的)

document上还有一个hidden属性,当页面可见时为false,不可见为true

本Demo中,当页面不可见时音乐停止播放,当页面可见时自动恢复播放

对比页面index2.html