video autoplay 自动播放之研究

站长

2024年04月22日 08:43 · 阅读数 5

自动播放策略

按 MDN 的说法，video 的 autoplay 控制视频的自动播放。

<video src="/videos/awesomevid.mp4" autoplay>

但因为默认自动播放比较打扰用户，所以还需满足以下条件之一才能自动播放，以实现更好的用户体验。

视频静音（通过加上 muted 属性）或音量设置为 0
用户与网站进行了交互（通过点击、敲击、按键等）
站点已被列入浏览器白名单；
- 浏览器确定用户频繁使用媒体，自动加入白名单
- 或者通过首选项
- 或其他用户界面功能手动发生
自动播放功能策略授予了 <iframe> 及其文档自动播放支持。

另外，chromium 内核的浏览器满足以下条件，也可以自动播放。

用户已将该站点添加到其移动设备的主屏幕
或在桌面设备上安装了 PWA。

当前(2021-08)浏览器内核主要有 webkit (safari)、chromium(chrome、edge)，内核的自动播放策略决定了浏览器外在的视频自动播放表现。具体的更新策略可以参考以下的文档。(ps，主要是真的懒得一个个翻译了……）

chromium Autoplay policy in Chrome，2017-09-13 发布， 2021-05-25 更新
chromium www.chromium.org/audio-video… ， 2018-10-22 更新
webkit Auto-Play Policy Changes for macOS，2017-07-08 发布
webkit New video Policies for iOS，2016-07-25 发布

这些文章比较详细的介绍了自动播放策略的变更历史及相应的条件。

最佳实践

1、自动播放兜底

不要信任浏览器会自动播放，因为这玩意就是薛定谔的猫。所以我们最好加上一个 play 方法兜底，手动触发自动播放，并在失败的时候做些界面上的反馈。譬如出现重播或开启播放的按钮。

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
    });
}

2、安卓微信内自动播放的兜底

截止当前（2021-08）安卓微信内自动播放现在是不被支持的，即便 video 静音了，也不行。为什么会出现这个特殊的情况，是因为安卓微信内核为 X5 内核，猜测是它的行为并没有同步最新的 chromium。

需要做一些兜底策略，可能如下：

如果是静音视频展示的场景，可以考虑针对安卓微信展示相同效果的 gif
非静音视频效果，默认展示明显的诱导开始播放的按钮
忽略不管，等待用户触发网页行为后，再手动开启 play 方法

3、全屏处理

某些移动端浏览器自动播放时，会开启全屏。如果是理想的产品视觉效果，当然无可厚非。但如果想要禁用播放全屏，需要考虑加上 playsinline 属性以做兼容。腾讯 x5 内核下，还需要开启同层渲染 x5-video-player-type='h5-page'，避免全屏。

<video
    autoplay
    src={videoUrl}
    webkit-playsinline="true"
    playsinline="true"
    x5-video-player-type='h5-page'
/>

iframe 内 video 自动播放

iframe 的情况自己没有上机研究过，具体可以参考 autoplay/#iframe-delegation