背景:
在维护公司内播放器组件的过程中,被业务方反馈了一个问题:在iphone 13 / iOS 15.0.1环境的webview中播放器播放异常。异常表现为:正常播放直播流(HLS/m3u8)时,有声音,封面不消失,无视频展示。
尝试路径
-
以业务方播放器配置,尝试稳定复现
- 在 iphone 其他机型上(非 iOS 15下)测试,表现正常。
- 在 iOS 15.4上测试,表现正常。
- 在安卓机型上测试,表现正常。
- 在iOS 15.0.1 上,稳定复现。
移除播放器多余配置后(隐藏修改),尝试播放直播流。发现静音状态下,可以正常播放。
-
调试之前静音起播流程。
a. 科普一个知识:web浏览器对于音视频的播放策略正朝着更严格的方向进展 相关文档🔗
常规通过使用 Video 的静音起播来绕过浏览器对视频的限制。但是即便有了绕过方案,仍旧会有一些机型例如 三星S6,播放失效。
b. 调试静音起播流程正常。
-
调试流程中发现一些促使重绘的手段可以强制视频正常展示。(例如切出App、跳转到其他view再调回)。尝试对播放器DOM 进行重绘尝试。
a. 科普另一个知识:如何促使浏览器的重绘和重排 相关文档🔗 相关文档2🔗
b. 对分层结构进行修改尝试后,发现 Video 标签的重绘后可在视频加载后,强制渲染视频首帧,并且促使视频正常播放。 至此,我以为我解决了问题。兴致勃勃的和业务方进行沟通,但是得到的回复是 ==> 只有第一帧,不符合预期。对比了一下积木的配置和我本地的配置,发现 Video 上的人畜无害 poster属性,竟然会有意想不到的影响??? 然后我以上面的一些debug思路进行搜索,找到了一下的问题答案。
解决方案
核心参考: 苹果开发者论坛回复
课代表画一下重点:
在 iOS 15系统的某些版本里,<video>标签的 poster属性会有展示上的问题,会在播放HLS视频的时候有影响。
总结了一下网友们的热心回复(会有一些hack的方式):
- CSS hack
- 讲 Video 标签的position 定位为绝对值。
- 为 Video 标签设置非透明的背景颜色。
- video 属性
- 为video标签设置 playinline autoplay muted loop(直播)。
- 自定义实现 poster。
最后,以在特定机型绕过原生poster设置,以及设置全必需的属性绕过了本异常。
希望本经验会对你开发有所帮助。以上。