Chrome 66版本视频/音频自动播放策略介绍

发表于 |

前言

最近在做直播相关业务开发，chrome大佬将在 2020年底不支持flash啦，那现在html5的播放器开始成为了主流，各大平台也有了自己的html5播放器～ 觉得我们肯定也得赶紧抱上这个变化，就开始了html5视频播放开发之旅。

愉快的开发之旅中，总是能遇到一个神奇的问题： chrome 里尝试播放偶现了个报错

1
Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD

一开始以为是video.play 调用过早，于是放到到了 canplay 事件后执行。

1
2
3
video.addEventListener('canplay', () => {
  video.play();
})

但是测试到时候发现依旧不能解决，难道又有什么新坑么？
仔细一看，chrome很贴心呀，已经放了一个链接https://goo.gl/xX8pDD于是赶紧打开看下。
发现这是 最新chrome增加了对视频自动播放控制的策略。

Chrome 66版本视频/音频自动播放策略介绍

先附上chrome大佬的说明： https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

新策略介绍

Chrome’s autoplay policies are simple:

  • Muted autoplay is always allowed.
  • Autoplay with sound is allowed if:
    • User has interacted with the domain (click, tap, etc.).
    • On desktop, the user’s Media Engagement Index threshold has been crossed, meaning the user has previously played video with sound.
    • The user has added the site to their home screen on mobile or installed the PWA on desktop.
  • Top frames can delegate autoplay permission to their iframes to allow autoplay with sound.

简单翻译一下是这个意思:

  • 静音的视频/音频可以自动播放
  • 以下情况的自动播放会被允许
    • 用户有点击等操作
    • PC：MEI（后面会介绍）够高
    • 移动端：你的站点被用户添加到首页，或者安装了pwa
  • 使用iframe时，如果外层有自动播放权限，并给iframe添加了 allow="autoplay"(后面提及的)

处理方案

我们能直接控制一般是这2条

  1. 用户有点击等操作
  2. 静音的视频/音频可以自动播放

1. 增加用户有点击等操作

可以修改你的交互场景，比如：

  • 可以在视频播放上放一个大的播放按钮，点击再开始播放
  • 点击按钮后弹窗里打开视频再播放
  • spa应用，跳转也是当前页面的，可以让用户无感知的体验自动播放

但是呢，以上这些都有一些局限性，离真正的自动播放还有一点差别的。

2. 针对静音的视频/音频可以自动播放这一特点兼容

这个一般针对页面一打开就需要自动播放一个视频的.

我们可以考虑如下代码进行兼容：

1
2
3
4
5
6
7
8
9
10
var video = document.getElementById('video');
video.play()
  .then(() => {
    // 播放成功啦
  }, () => {
    //播放失败
    video.muted = true; // 设置为静音然后再次播发
    video.play();
  })

虽然被静音了，但是能保证视频还是正常被播放的。

2种方案虽然都不是特别完美，但这也chrome希望我们做的处理。
大家可以按照自己的需求，选择上面2种处理方案中的一种～

Media Engagement Index (MEI)

简单来说，这是chrome根据当前用户行为，对你网站视频的一个评分，评分越高，他就会允许你自动播放视频

可以通过一下子地址，查看你chrome里的信息～

1
chrome://media-engagement/

我们继续关注下提高评分的方法，提高评分有4个标准：

  1. Consumption of the media (audio/video) must be greater than 7 seconds.
    用户看视频/音频超过7秒
  2. Audio must be present and unmuted. 这段时间有音频且不是静音的。
  3. Tab with video is active. 页面所属的标签页是激活状态，也就是用户正在浏览你的页面
  4. Size of the video (in px) must be greater than 200x140. 视频尺寸得够大，需要超过200x140

这4个标准看上去就是chrome在评估，用户是不是真的在使用你的网页来看视频，只要用户持续使用，相信你的自动播放也不太会被限制。

PS: 用户如果手动清理缓存会清空这个评分的，不过用户这个操作一般不会太频繁吧..

小结

chrome的策略我们只能竟然去兼容.. 毕竟浏览器对于前端来说是爸爸级别的压制。

先用兼容方案让用户使用起来～ 慢慢的，如果用户真的一直使用你的网站，MEI的评分更高，也就太会被限制啦

最后推一下自己的 video播放器 popcorn-video正在不断的迭代开发，欢迎提建议和bug

现在已经支持react组件，在react框架下，相信会比video.js有更好的使用体验～