Chrome自动播放策略

引言

正如你可能已经注意到的,网络浏览器正在朝着更严格的自动播放政策发展,以改善用户体验,最大限度地减少安装广告拦截程序的动机,并减少昂贵和/或受限网络上的数据消耗。这些更改旨在为用户提供更大的播放控制权,并使拥有合法用例的出版商受益。

Chrome的自动播放策略如下:

始终允许静音自动播放。

也就是说,设置了muted的video,自动播放是没有限制的,毕竟不发出声音对用户可能也没有较大的影响。

如果不需要声音,可以直接将视频设置muted进行播放。后续再让用户开启播放

xml 复制代码
<video id="video" muted autoplay>
<button id="unmuteButton"></button>

<script>
  unmuteButton.addEventListener('click', function() {
    video.muted = false;
  });
</script>

用户已经与域进行了交互

用户进行交互(例如点击,手机的点击,滑动之类)后,chrome允许可以调用VideoElement.play()的方式进行播放。

这点就比较抽象了,感觉没有一个判断用户是否进行交互的方案,实际过程中可以引导用户进行点击。

dart 复制代码
var promise = document.querySelector('video').play();

if (promise !== undefined) {
  promise.then(_ => {
    // Autoplay started!
  }).catch(error => {
    // Autoplay was prevented.
    // Show a "Play" button so that user can start playback.
  });
}

Media Engagement Index

在桌面上,用户的Media Engagement Index已经达标,这意味着用户以前播放过带声音的视频。

这个表其实就是一个用户对各个网站的访问频繁统计,可以通过chrome://media-engagement 进行查看。

这种播放也有相关限制:

  • 媒体(音频/视频)的消耗量必须大于7秒。

  • 音频必须存在并取消静音。

  • 带有视频的选项卡处于活动状态。

  • 视频的大小(以像素为单位)必须大于200x140。

开发者开关

可以通过 chrome.exe --autoplay-policy=no-user-gesture-required命令关闭自动播放策略

顶级框架可以将自动播放权限委托给它们的iframe,以允许使用声音进行自动播放。

xml 复制代码
<!-- Autoplay is allowed. -->
<iframe src="https://cross-origin.com/myvideo.html" allow="autoplay">

<!-- Autoplay and Fullscreen are allowed. -->
<iframe src="https://cross-origin.com/myvideo.html" allow="autoplay; fullscreen">

参考内容

developer.chrome.com/blog/autopl...

相关推荐
小蜜蜂嗡嗡4 分钟前
flutter封装vlcplayer的控制器
前端·javascript·flutter
一tiao咸鱼6 分钟前
如何简单使用 prompt
前端·aigc
cdbqss111 分钟前
VB.net编写的身份证类
前端·.net
骑自行车的码农29 分钟前
React短文系列 遍历fiber树 App的创建
前端·react.js
AskSky32 分钟前
为了搞一个完美的健身APP,我真是费尽心机
前端
斯~内克38 分钟前
基于Vue.js和PDF-Lib的条形码生成与批量打印方案
前端·vue.js·pdf
阴阳怪气乌托邦39 分钟前
别再啃OA代码了!低代码"搭积木"式搞数智化,我直接少写500行
前端·低代码
beelan43 分钟前
v-on的思考
前端
山河木马1 小时前
前端学习C++之:.h(.hpp)与.cpp文件
前端·javascript·c++
用户9272472502191 小时前
PHP + CSS + JS + JSON 数据采集与展示系统,支持伪静态
前端