Chrome 中的自动播放策略

为了改善用户体验，谷歌浏览器限制了音视频的自动播放，最大限度地减少广告骚扰，并减少数据消耗

Chrome 66 开始限制了 video 和 audio 元素的自动播放，从 Chrome 71 开始限制了 Web Audio API 的自动播放，因此一些网页游戏和webrtc相关的音视频项目都会相应收到影响

autoplay

虽然限制了自动播放，但是还有一些情况下是允许自动播放的

静音状态下始终允许自动播放
有声音自动播放时：
- 用户进行了页面点击等与界面发生交互行为后
- 达到媒体参与指数, 也就是用户之前在本站播放过有声音的视频
- 用户将页面添加到移动设备的主屏幕上或者在PC上安装了PWA
主站可以将自动播放权限委托给它们的 iframe，以允许自动播放声音。

媒体参与指数

媒体参与指数 (MEI) 衡量个人在网站上消费媒体的倾向。Chrome 的方法是访问每个来源的重要媒体播放事件的比率：

音视频播放时间必须大于 7 秒。
必须存在音频且未静音。
必须处于正在播放视频的标签页
视频的大小必须大于200x140像素

该指数仅在PC端浏览器有效, 当分数足够高时则允许自动播放

用户的 MEI 可在about://media-engagement内部页面获得

始终允许自动播放

有时我们想让浏览器一直可以自动播放则需要设置：

chrome.exe --autoplay-policy=no-user-gesture-required

始终禁止自动播放

有时我们想让浏览器一直不允许自动播放则需要设置：

chrome.exe --disable-features=PreloadMediaEngagementData, MediaEngagementBypassAutoplayPolicies

允许`iframe`自动播放

默认情况下同源iframe允许自动播放

不是同源的则需要设置：

<!-- 允许自动播放 -->
<iframe src="跨源地址" allow="autoplay"><!-- 允许自动播放和设置全屏 -->
<iframe src="跨源地址" allow="autoplay; fullscreen">

检测浏览器是否支持自动播放

https://video-dev.github.io/can-autoplay/

任何时候都不要假设会自动播放

引导用户进行交互行为是最稳妥的方式

var promise = document.querySelector('video').play();if (promise !== undefined) {promise.then(_ => {// 开始播放}).catch(error => {// 需要用户进行页面交互});
}

微信内置浏览器、小程序webview中音频自动播放处理

微信内置浏览器中的音频自动播放需在WeixinJSBridgeReady事件内调用play方法

document.addEventListener("WeixinJSBridgeReady", () => {video.play()
}, false);

Chrome 中的自动播放策略如何设置自动播放相关推荐

计算机excel怎么添加实线边框,excel中单元格输入内容怎么设置自动加上实线边框...
excel中单元格输入内容怎么设置自动加上实线边框腾讯视频/爱奇艺/优酷/外卖充值4折起 Excel是我们常用的办公软件之一,如果想要在单元格中输入内容时,单元格的边框自动加上实线边框,该怎么办呢 ...
西瓜播放器xgplayer设置自动播放
前言: 用西瓜播放器xgplayer做rtsp直播流的播放,想要在页面加载时自动播放. 设置autoplay:ture,muted:ture,嘿没有成功! 在网上找了半天,设置手动触发play.pla ...
PyQT中QTableWidget根据单元格内容设置自动宽度
比如当前有一个表格对象ws1, 现在向表格中添加内容: list = ['故人西辞黄鹤楼, 烟花三月下扬州', '忽如一夜春风来, 千树万树梨花开'] for i in lsit :ws1. setI ...
达梦数据库自动备份，DM8设置自动备份，达梦数据库，自动备份。详细步骤。常用命令，启动关闭数据库，查看DMAP状态
常用命令 DmServiceDAMENG.service改成自己bin目录下文件名运维常见问题,官方文档注意事项登录客户端工具,一定要使用SYSDBA用户进行下面的客户端操作登录数据库主机,一 ...
在哪里设置自动锁定计算机,win10如何设置自动锁定屏幕_win10设置自动锁屏的步骤...
我们暂时离开电脑的时候,都会希望屏幕可以自动锁定,有时候没空及时锁屏又不想让电脑一直处于运行状态,又不希望电脑被别人乱动,那么这个时候我们可以设置电脑自动锁定屏幕,该怎么设置呢,这就给大家带来win1 ...
mysql 数据表时间自动_MySQL数据库时间设置自动添加时间和自动更新时间
MySQL字段中设置时间字段自动添加创建时间和自动更新时间设置, 设置字段类型为:timestamp 默认值设置为current_timestamp(), 更新时间字段字段类型为:timestamp ...
如何使用计算机自动筛选功能,如何设置自动筛选,如何设置自动筛选条件
在这里介绍PS魔棒工具的使用方法,希望本指南能帮到大家. 操作方法 01下面,以下图中的图片为例介绍魔棒工具的使用方法. 02首先,我们从工具栏中调出魔棒工具,鼠标长点住快速选择工具的图标,在弹出的内 ...
html5 自动连接wifi,怎么设置自动切换wifi 点击右上角的【高级设置】
怎么停止手机WIFI自动切换安卓手机设置禁止自动连接WiFi的方法: 在此以"小米4"手机为例,打开手机"设置"界面,点击"WLAN"项进 ...
win7自动锁定计算机,win7设置自动锁屏的方法_win7自动锁定怎么设置
有时候我们需要离开电脑一会,但是又不想一直开着屏幕,那么其实我们可以设置自动锁屏,但是许多用户不知道win7自动锁定怎么设置,为了帮助到大家,本文就给大家带来win7设置自动锁屏的方法. 具体步骤如下 ...
idea 怎么自动导入import_IntelliJ IDEA设置自动导入包
IntelliJ如何设置自动导包 idea 关于自动导包的设置标签: idea 2016-09-30 18:10 400人阅读评论(0) 收藏举报本文章已收录于: .embody{ paddi ...

Chrome 中的自动播放策略如何设置自动播放

Chrome 中的自动播放策略

autoplay

媒体参与指数

始终允许自动播放

始终禁止自动播放

允许`iframe`自动播放

检测浏览器是否支持自动播放

任何时候都不要假设会自动播放

微信内置浏览器、小程序webview中音频自动播放处理

Chrome 中的自动播放策略如何设置自动播放相关推荐

最新文章

热门文章

Chrome 中的自动播放策略如何设置自动播放

Chrome 中的自动播放策略

autoplay

媒体参与指数

始终允许自动播放

始终禁止自动播放

允许iframe自动播放

检测浏览器是否支持自动播放

任何时候都不要假设会自动播放

微信内置浏览器、小程序webview中音频自动播放处理

Chrome 中的自动播放策略如何设置自动播放相关推荐

最新文章

热门文章

允许`iframe`自动播放