关于前端:网页视频autoplay兼容及解决方案

网页视频自动播放的局限

自动播放是指无需通过用户的批准就能够开始播放视频。这包含在video元素应用autoplay属性或者通过JavaScript代码间接调用video元素的play办法。
<video src="/video.mp4" autoplay>
和
videoElement.play();

十分遗憾的是，各个浏览器都为多媒体的自动播放设置了不尽相同的限度策略，也就意味着目前想要实现有良好兼容性的自动播放，是很难办到的。

各个浏览器对视频自动播放的限度

IOS

IOS9以下版本：

（在过后挪动互联网的条件下，播放一个视频的流量和电量老本都是十分高的，因而视频的播放必须要先通过用户批准）

无奈自动播放

IOS10以上版本：

（浏览器厂商不给主动播视频，开发者只好曲线救国，应用GIF动图代替视频实现自动播放，然而GIF动图须要耗费的流量是视频的12倍，性能耗费是视频的2倍，并且挪动互联网倒退飞速，用户对视频播放占用的流量和电量也不再这么敏感，于是决定给挪动设施的视频自动播放放宽限度）

<video autoplay>满足下列条件能够自动播放：

1.视频的源是没有音轨的或video元素应用了muted属性手动静音2.video元素须要在屏幕上可见3.video元素设置了playinline属性

videoElement.play()满足下列条件能够自动播放：

1.视频的源是没有音轨的或video标签应用了muted属性手动静音2.video元素设置了playinline属性

以下行为将导致自动播放生效：

<video>元素在没有用户手势的状况下有了音轨或勾销了静音，播放将被暂停

Chrome in Android

Android 4.3及以下版本：

4.3及以下版本的安卓，应用的是基于Webkit实现的内核，和ios有着雷同的体现

无奈自动播放

Android 4.4及以上版本：

4.4及以上版本的安卓，用上了Bink/Chromium内核，有了本人的一套限度规定

Chrome 53版本以前：

无奈自动播放

Chrome 53版本当前，Chrome 58版本以前：

<video autoplay>和videoElement.play()满足下列条件能够自动播放：

1.视频的源是没有音轨的或video元素应用了muted属性手动静音2.用户未开启流量节俭模式

Chrome 58版本当前，Chrome66版本以前：

<video autoplay>满足下列条件能够自动播放：

1.视频的源是没有音轨的或video元素应用了muted属性手动静音2.用户未开启流量节俭模式3.video元素须要在屏幕上可见

或
1.站点被"增加到主屏幕"，且视频的源在manifest文件标识的范畴内

videoElement.play()满足下列条件能够自动播放：

1.视频的源是没有音轨的或video元素应用了muted属性手动静音2.用户未开启流量节俭模式

Chrome 66版本当前：

在Chrome 58版本的根底上移除了“未开启流量节俭模式”的限度

Chrome in PC

Chrome 66版本以前：

齐全反对自动播放

Chrome 66版本及当前：

视频的源是没有音轨的或video元素应用了muted属性手动静音
或
站点是一个PWA利用，并且用户把它装置到了桌面

Safari in PC

Safari 11版本以前：

齐全反对自动播放！

Safari 11版本当前：

视频的源是没有音轨的或video元素应用了muted属性手动静音

能够发现，无论是什么浏览器内核，它们对于视频自动播放限度的改变趋势都是相近的，挪动端在一直地放松限度，而桌面端则在一直地收紧限度，直到达成了一个近乎对立的规范：只有静音视频能力自动播放。

参考：
Muted Autoplay on Mobile: Say Goodbye to Canvas Hacks and Animated GIFs!
Media updates in Chrome 58
Chrome's autoplay feature
updated video policies for iOS
Auto-Play Policy Changes for macOS

解决办法

1. 静音自动播放

只在桌面端应用的网页，采取静音的形式自动播放视频，挪动端则无奈在低版本手机中失常运行。

2. 通过用户交互行为解除自动播放限度

在桌面端浏览器上，能够通过在调用video.play()办法之前疏导用户与页面产生交互行为，即可使自动播放限度解除。

在挪动端，只容许通过用户交互来触发有声媒体的播放，而不是在用户与页面产生交互后解除自动播放限度，因而须要把video.play()办法放到HTMLElement容器的交互事件回调中（点击/触摸）。

document.body.addEventListener('click', () => {    console.log('触发播放')    this.videoRef.play();})

联合静音自动播放与交互播放

• 视频自动播放时设置 muted: true。
• video.play()办法绑定到HTMLElement容器的交互事件回调中（点击/触摸）。
• 在播放界面上通过图标显示以后视频被静音，疏导用户点击。
• 当用户点击绑定的容器时，在事件的回调中将视频再次播放，此时无需设置静音，同时更改静音图标

！用户手势令牌过期

如果须要在取得用户手势令牌后，提早数秒进行video.play()办法的调用，比如说想要在交互事件回调函数中先异步申请视频链接再进行播放，则须要留神在挪动端，用户的手势令牌可能会在N秒后过期，在不同的机型中N的大小也不同，即提早调用video.play()办法可能会生效。

尝试在点击事件回调中提早几秒调用play()办法并捕捉报错：Play() can only be initiated by a user gesture.

<img width="378" alt="Snipaste_2022-01-13_16-15-11" src="https://user-images.githubusercontent.com/44472735/149320483-ea7709b8-2355-4a5f-90c5-433e0eaa378d.png">

在线尝试

解决办法：先调用video.load()，再去提早调用video.play()。

<video id="video"></video><button id="button"></button><script>  button.addEventListener('click', onButtonClick);  function onButtonClick() {    // This will allow us to play video later...    video.load();    fetchVideoAndPlay();  }  function fetchVideoAndPlay() {    fetch('https://example.com/srcApi')    .then(src => {      video.src = src;      return video.play();    })    .then(_ => {      // Video playback started ;)    })    .catch(e => {      // Video playback failed ;(    })  }</script>

参考：

DOMException: The play() request was interrupted

3. 检测自动播放，播放失败时回退到用户交互触发播放

• 通过play API返回的Promise检测自动播放胜利还是失败

不应用autoplay属性，而是调用play API来尝试进行自动播放，高版本浏览器会返回一个Promise，如果自动播放失败，则Promise会回绝(低版本浏览器不会返回Promise，此时能够通过事件或参数来检测自动播放）

var promise = document.querySelector('video').play();if (promise !== undefined) {    promise.catch(error => {        // Auto-play was prevented        // Show a UI element to let the user manually start playback    }).then(() => {        // Auto-play started    });}

• 通过video事件或参数检测自动播放胜利，通过超时判断自动播放失败

应用autoplay属性，或调用play API来尝试进行自动播放，通过监听由自动播放触发的play事件，监听timeupdate事件，查看currentTime是否产生了变动等等方法来检测自动播放胜利，并通过设置定时器超时来作为判断自动播放失败的根据。

this.videoRef.addEventListener('timeupdate', (e) => {    // console.log('视频自动播放胜利');})

this.videoRef.addEventListener('canplay', (e) => {    // console.log('视频已就绪');    setTimeout(() => {        // console.log('视频自动播放失败');    }, this.maxWaitTime)})

不要假如video标签肯定会依照预期触发某个事件或扭转某个属性。

4. 减少网站视频的受众，解除自动播放的限度

浏览器的限度策略不是相对的，如果在本地尝试将你的网页代理到出名的视频网站（比方youtube.com)，会发现自动播放限度被解除了。

间接尝试自动播放失败，并报错显示“调用play()办法失败，因为用户尚未与文档产生交互”

<img width="1115" alt="Snipaste_2022-01-13_14-57-46" src="https://user-images.githubusercontent.com/44472735/149320517-83f9fc7e-3b83-485c-a995-fb1a854c08c2.png">

将页面代理到出名视频网站的域名后，自动播放胜利

<img width="846" alt="Snipaste_2022-01-13_14-58-20" src="https://user-images.githubusercontent.com/44472735/149320537-5bfb9615-66f2-421a-a332-9644a8d03fd0.png">

桌面端Chorme会针对用户给每个网站统计一个MEI指数，用来掂量用户在网站上生产多媒体的偏向强烈水平，并在浏览器内保护一个MEI列表(无奈通过JS探测）。当用户在网站上观看视频并满足以下条件时

• 观看时长大于 7 秒。
• 视频音轨存在并且没有静音。
• 带有视频的选项卡处于沉闷状态。
• 视频的像素大小大于200x140。

浏览器就会进步该网站的MEI指数，当网站的MEI指数足够高时，自动播放的限度就会被解除。

新用户会加载一个初始MEI列表，这个初始列表会事后植入一些被很多用户打了MEI高分的网站，也就是说如果一个网站有足够多的用户容许自动播放，那么这个网站就会默认失去新用户的MEI高分，并放开自动播放限度（这个初始列表是齐全由算法生成的）。并且这个初始列表会被用户集体的MEI行为所笼罩。

通过拜访chrome://media-engagement来查看你的MEI列表（不蕴含初始MEI列表）

桌面端Safari也有相似的策略，它声称“应用主动推理引擎来阻止大多数网站自动播放带有声音的视频”，但没有公开具体的策略内容。

参考：

媒体参加指数（Media Engagement Index，MEI）

Web Audio, Autoplay Policy and Games

5. 应用gif图片，程序展现序列图片等伎俩模仿视频成果

应用gif图片模仿视频播放成果。

应用动静绘制图片到canvas的形式模仿视频播放成果：

1. 图片对象预加载，放在内存中；
2. 播放开始，canvas擦除上一帧图片，同时绘制以后帧图片。

应用动静更新图片dom的形式模仿视频播放成果：

1. 图片对象预加载，放在内存中；
2. 播放开始，页面增加以后图片元素，同时移除上一帧图片元素，保障页面中仅有一个图片元素。

因为动静更新图片dom的形式实质是播放html元素，因而还能够实现弱网状态下“抽帧播放”，在“视频播放”中手动增加额定信息等。

查看在线演示

参考：

https://www.didiglobal.com

https://juejin.cn/post/686958...