媒体播放策略以及解决方法

网页加载完成后立即播放音频（或带有音频轨道的视频）可能会意外地打扰到用户。尽管自动播放媒体文件是一个很实用的功能，但是我们也应该谨慎地使用它，保证只有在它被需要的时候才使用。为了让用户拥有控制权，通常浏览器会提供各种方式禁用自动播放音频功能。

如果直接调用paly()方法会报一下错误！

解决方法

据新政策，媒体内容将在满足以下至少一个的条件下自动播放：

音频被静音或其音量设置为 0
用户和网页已有交互行为（包括点击、触摸、按下某个键等等）
网站已被列入白名单；如果浏览器确定用户经常与媒体互动，这可能会自动发生，也可能通过首选项或其他用户界面功能手动发生（媒体参与度）
自动播放策略应用到<iframe>或者其文档上

1.媒体参与度

媒体参与度一般受访问频率、停留时长等因素影响

媒体参与度的计算规则无法通过技术手段更改
媒体参与度的计算规则不同版本的浏览器可能会有改动
查看浏览器的媒体参与度

2.实现方式

如果要媒体参与度低的话，又想自度播放那就需要满足静音播放，或者与页面进行交换其中一种。但是要是想有一个好的交互体验默认自动静音播放，然后用户可以手动的打开声音、这样就满足了和页面交互的条件就可以播放声音了。

代码如下

      // 获取video元素
      const video = document.getElementById('video')
      const btn = document.getElementById('btn')
      // 如果video加载就会调用播放方法
      video.addEventListener('canplay', play)
      // 播放方法
      function play() {
        // 禁音
        video.muted = true
        // 音频上下文
        const act = new AudioContext()
        // 如果状态等于running这说明可以播放
        const isPlay = act.state === "running"
        act.close()
        if(isPlay){
           // 如果可以播放可以播放声音
          video.muted = false
          btn.style.display = 'none'
        } else {
          btn.style.display = 'inline-block'
          // 如果不可播放，等下次用户点击按钮重新调用play
          btn.addEventListener('click', play)
        }
        // 播放
        video.play()
      }