iOS 15.0.1下 Video 标签自动播放视频时首帧播放异常问题

背景：

在维护公司内播放器组件的过程中，被业务方反馈了一个问题：在iphone 13 / iOS 15.0.1环境的webview中播放器播放异常。异常表现为：正常播放直播流(HLS/m3u8)时，有声音，封面不消失，无视频展示。

尝试路径

1. 以业务方播放器配置，尝试稳定复现

   • 在 iphone 其他机型上(非 iOS 15下)测试，表现正常。
   • 在 iOS 15.4上测试，表现正常。
   • 在安卓机型上测试，表现正常。
   • 在iOS 15.0.1 上，稳定复现。

2. 移除播放器多余配置后(隐藏修改)，尝试播放直播流。发现静音状态下，可以正常播放。

3. 调试之前静音起播流程。

   a. 科普一个知识：web浏览器对于音视频的播放策略正朝着更严格的方向进展 相关文档

常规通过使用 Video 的静音起播来绕过浏览器对视频的限制。但是即便有了绕过方案，仍旧会有一些机型例如 三星S6，播放失效。

b. 调试静音起播流程正常。

4. 调试流程中发现一些促使重绘的手段可以强制视频正常展示。(例如切出App、跳转到其他view再调回)。尝试对播放器DOM 进行重绘尝试。

   a. 科普另一个知识：如何促使浏览器的重绘和重排 相关文档 相关文档2
   b. 对分层结构进行修改尝试后，发现 Video 标签的重绘后可在视频加载后，强制渲染视频首帧，并且促使视频正常播放。

5. 至此，我以为我解决了问题。兴致勃勃的和业务方进行沟通，但是得到的回复是 ==> 只有第一帧，不符合预期。对比了一下积木的配置和我本地的配置，发现 Video 上的人畜无害 poster属性，竟然会有意想不到的影响？？？ 然后我以上面的一些debug思路进行搜索，找到了一下的问题答案。

解决方案

核心参考: 苹果开发者论坛回复

课代表画一下重点：

在 iOS 15系统的某些版本里，

总结了一下网友们的热心回复(会有一些hack的方式)：

• CSS hack
  • 讲 Video 标签的position 定位为绝对值。
  • 为 Video 标签设置非透明的背景颜色。
• video 属性
  • 为video标签设置 playinline autoplay muted loop(直播)。
  • 自定义实现 poster。

最后，以在特定机型绕过原生poster设置，以及设置全必需的属性绕过了本异常。

---

希望本经验会对你开发有所帮助。以上。