ios14/ios15系统video标签无法自动播放视频问题

ios14/ios15 系统 video 标签无法自动播放视频问题

背景

出于用户体验考虑，浏览器不希望网站能够自动播放视频，即使标签上配置了 autoplay 属性，也无法播放视频。

解决办法就是将视频设置为静音播放，这样其实从体验上来讲视频和一个 gif 也没有什么区别，只要视频静音，浏览器就能够自动播放视频。

https://caniuse.com/mdn-html_elements_video_autoplay_requires_muted_audio

<video autoplay muted playsinline loop>
  <source src="/video.mp4" type="video/mp4" />
</video>

这个规范并不是标准规范，经过测试大部分浏览器会遵循这个规则，有些浏览器还会要求加上 playsinline 属性，强制视频进行内联播放。

但在测试兼容性过程中发现在 ios14 / ios15 系统上，video 标签的 autoplay 属性并不生效，即使设置了上述代码也不行。

查阅资料尝试再通过 JS 调用的方式进行播放：

const video = document.querySelector("video");
try {
  await document.getElementById("video").play(); // 3秒后暂停视频
} catch (e) {
  alert("播放失败：" + e.message);
}

发现还是不行，通过捕获浏览器错误发现如下报错：

看来是权限不足导致，具体也找不到更进一步的解决办法。

曲线救国

由于我们的 webview 是内嵌在 app 内的，尝试是否能通过客户端配置绕过这一限制。

最后通过在 app 内嵌 webview 的时候，将 webview 中注入一段 js，js 的内容和上面主动播放视频的 js 代码一直，但通过 app 注入的代码能够执行并播放视频。考虑可能是 app 注入 js 的执行权限不同，成功绕过了浏览器的限制。