页面自动播放策略autoplay失效-浏览器自动播放政策限制

chrome的自动播放政策

https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide

为了改善用户体验，最大限度降低网络上的数据消耗，或者减少对用户的骚扰，web浏览器正朝着更严格的自动播放策略发展。

Chrome的自动播放政策很简单：

1. 静音自动播放总是允许的。

2. 在下列情况下允许使用声音自动播放：

 a. 用户已经与此页面进行了交互（点击，tap，按下键盘等）。
 b. 在该站点，用户的媒体参与指数阈值(MEI)达到可以自动播放音频的标准，这意味着用户以前播放带有声音的视频。
 c. 在移动设备上，用户将该网站添加到主屏幕（在浏览器中访问页面时将页面添加到主屏幕）或安装了PWA到主页。
 d. 顶部框架可以将自动播放权限授予其iframe以允许自动播放声音。

方法：
1. 静音自动播放总是允许的
2. 用户已经与此页面进行了交互（点击，tap，按下键盘等）

   a. 由第一点‘静音自动播放总是允许的’ 我们可以得知：静音的情况下可以播放视频，不会被阻塞。

可以先静音播放，只要监听到用户在此页面有交互（如按下键盘，点击，触屏），就将静音取消，使音频播放声音。

<video id="video" muted autoplay>
<script>
  window.addEventListener('click', function() {
    video.muted = false;
  });
</script>

  b. 通过js脚本模拟用户点击操作

...
   <audio id="ad" autoplay controls>
	  <source src="/Users/huixia.huang/Documents/SPX/spx-h5/src/call-system/notice.wav" type="audio/wav" />
	</audio>  
...
...

给音频添加auto play属性，打开页面，可以看到控制台报错Uncaught: （in promise）DOMExcepion: play() failed because the user didn’t interact with the document first.

用户没有与文档交互，音频的play方法失败。

在代码中模拟点击页面的操作，按钮的click事件有被触发，但发现控制台仍然报

Uncaught: （in promise）DOMExcepion: play() failed because the user didn't interact with the document first.

无法播放。

<button id="1" onClick="alert('clicked')">插入空白1</button>
...   
...  
     const btn1 = document.getElementById('1');
     const evt = document.createEvent('MouseEvent');
	 evt.initEvent('click', false, false);
	 btn1.dispatchEvent(evt); 

debug脚本模拟的click事件，click事件没有进入click事件的监听函数

观察event事件中的isTrusted属性：Event接口的 isTrusted 属性是一个只读属性，它是一个布尔值。当事件是由用户行为生成的时候，这个属性的值为 true ，而当事件是由脚本创建、修改、通过 EventTarget.dispatchEvent() 派发的时候，这个属性的值为 false 。

而当使用鼠标点击时，此时会进入click的事件监听函数，并且可以看到isTrusted属性为true

所以，浏览器可以通过此判断是否为用户的真实操作，来阻塞音频的播放。

3. 媒体参与指数（Media Engagement Index)(MEI)

MEI衡量个人在网站上消费媒体的倾向。

Chrome 目前的方法是访问每个来源的重要媒体播放事件的比率：

媒体消耗（音频/视频）必须大于7秒。
音频必须存在并取消静音。
视频选项卡处于活动状态。
视频大小（以像素为单位）必须大于200x140。

因此，Chrome会计算媒体参与度分数，该分数在定期播放媒体的网站上最高。足够高时，媒体播放只允许在桌面上自动播放。MEI是谷歌自动播放策略的一部分。它是一个算法，参考了媒体内容的持续时间、浏览器标签页是否活动、活动标签页视频的大小这一系列元素。不过也正因此，开发者难以在所有的网页上都测试这一算法的效果。

我的MEI位于chrome://media-engagement/内部页面

4.在移动设备上，用户将该网站添加到主屏幕

在浏览器中访问页面时将页面添加到主屏幕）或安装了PWA到主页。

5. 顶部框架可以将自动播放权限授予其iframe以允许自动播放声音

在顶部框架获得了自动播放权限后可以授予其iframe。若顶部框架没有自动播放权限，那么显示授予的自动播放仍然会被阻塞。

<iframe
		width="300"
		height="200"
		src="speak.html"
		allow="autoplay 'src' notice.wav">
	</iframe>

示例场景:

示例1：每次用户在他们的笔记本电脑上访问www.iqiyi.com时，他们都会观看电视节目或电影。由于其媒体参与度较高，因此可以自动播放。

示例2：www.iqiyi.com同时具有文字和视频内容。大多数用户偶尔会去该网站获取文字内容并观看视频。用户的媒体参与度较低，因此如果用户直接从社交媒体页面或搜索导航，则不允许自动播放。

示例3：news.iqiyi.com同时具有文字和视频内容。大多数人通过主页进入网站，然后点击新闻报道。由于用户与域名互动，新闻文章页面上的自动播放将被允许。但是，应该注意确保用户不会对自动播放内容感到意外。

示例4： 在爱奇艺泡泡页面将iframe与电影预告片一起嵌入其评论中。用户与域进行交互以访问特定的网站，因此允许自动播放。但是，泡泡需要将该特权显式委托给iframe以便内容自动播放。

6.改变浏览器配置

change Chrome browsers’ config(only work on the user who changed permission)

将语音权限从自动（默认）更改为允许

7. 检测到播放函数失败时弹窗提醒用户打开声音/做任意交互动作

弹出窗口，要注意用户单击按钮或页面中的任何地方，进行交互