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。若顶部框架没有自动播放权限，那么显示授予的自动播放仍然会被阻塞。

<iframewidth="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. 检测到播放函数失败时弹窗提醒用户打开声音/做任意交互动作

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

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

浏览器跳不同不同页面 php,利用js根据不同浏览器自动跳转不同页面
//本源码由www.qsyz.net提供站长微博www.weibo.com/ohtc var ua = navigator.userAgent.toLowerCase(),s,app = {},ur ...
关于video设置autoplay属性无法自动播放问题
问题代码: 原因分析及解决方案:浏览器限制有声音的视频自动播放,即使添加自动播放属性autoplay也不能直接播放:添加muted意为静音播放即可实现自动播放. 解决后代码如下:
去除浏览器自动填充密码功能
去除浏览器自动填充密码功能去除浏览器自动填充密码功能去除浏览器自动填充密码功能在项目开发中,遇到这样一个问题,前端显示后端一个机密数据时,使用了<input type = 'passwor ...
Mobileye 自动驾驶策略（一）
Mobileye 自动驾驶策略(一) 详解 Mobileye 自动驾驶解决方案 Mobileye的自动驾驶解决方案.总得来说,分为四种: Visual perception and sensor fu ...
关于ffmpeg解决主流浏览器无法播放wmv、avi等格式视频问题(内附linux环境相关安装包nasm、yasm、x264等)
最近接到一个老项目,由于老项目之前适配的是ie浏览器.该老项目中有很多wmv和avi格式的视频.最近需要更换视频其他浏览器访问,需要对除ie浏览器的其他浏览器进行适配.ie浏览器播放视频没有任何问题, ...
HTML5播放视频autoplay不起作用-HTML5视频不自动播放
初学HTML5视频播放的同学,可能大多数都会遇到这样一个问题:按照教程写的代码,添加了autoplay属性,为什么视频还是无法自动播放? <!DOCTYPE html> <html& ...
java在线支付---06,07,08_在线支付_编写将数据提交给易宝支付的JSP页面,集成和测试向易宝发送支付请求,实现浏览器自动向易宝发送支付请求
06_在线支付_编写将数据提交给易宝支付的JSP页面 -------------------------------------------------------------- 1./payment ...
通过howler.js实现在Android下的微信浏览器自动播放音频
howler.js是一个把webaudio进行封装的一个js库,通过它可以轻松的对音频文件进行控制播放.暂停.甚至指定播放音频中的某个片段.以及加快等等,这里我们只关注它在微信浏览器中自动播放的问题, ...
Safari浏览器自动刷新页面插件Auto Refresh
Safari浏览器自动刷新页面插件Auto Refresh https://extensions.apple.com/details/?id=com.agriffindesign.autorefre ...

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