浏览器自动播放音视频-前端实现方案

目录

前言

浏览器自动播放策略

策略详情：

实现方案 

方案1： 互动后播放

方案2： 互动后出声

总结

---

前言

在开发中可能有遇到这样的需求，当用户打开页面后，需要自动播放视频或音频，按理说那就打开页面时play()一下不就搞定了吗，但实际情况很明显不是，不然也没得这篇文章喽，要实现这个需求，我们得先了解一下浏览器自动播放策略。再给出相应解决方案。

浏览器自动播放策略

Chrome浏览器的自动播放策略自Chrome66起生效,动机是改善用户体验

策略详情：

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

1. 始终允许静音自动播放。
2. 在以下情况下，带声音的自动播放会被允许：
   1. 用户已经与当前域进行了交互（click、tap）
   2. 在桌面设备上，用户的==媒体参与度==指数阈值已超过，这意味着用户之前播放过有声视频。
   3. 用户已将网站添加到移动设备上的主屏幕或在桌面上安装了 PWA。
3. 顶部帧可以将自动播放权限委派给其 iframe，以允许自动播放声音。

==媒体参与度（MEI, Media Engagement Index）==

媒体参与度 （MEI） 是衡量个人在网站上使用多媒体的倾向。

它是一个数字，可通过 chrome://media-engagement/ 查看。

数值越高，用户对该站点的媒体参与度越高，就越有机会自动播放。

但对于开发者而言：

        媒体参与度的计算规则无法通过技术手段更改

        媒体参与度的计算规则不同版本的浏览器可能会有变动

实现方案

首先呢，我们直接在用户进入页面的时候play()，可以发现视频并没有播放，并且报错Uncaught (in promise) DOMException: play() failed because the user did