网页视频autoplay兼容及解决方案

1年前 (2022) 程序员胖胖胖虎阿

155 0 0

网页视频自动播放的局限

自动播放是指无需经过用户的同意就可以开始播放视频。这包括在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.

在线尝试

解决办法：先调用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标签一定会按照预期触发某个事件或改变某个属性。