导航

萌即是正义!时不时分享一些ACG活动记录与有趣代码的小站!

记录iOS 17.4.1 Safari 本地视频无法正常显示的2个问题

作者:广树·时间:2024-04-05 20:16:50·分类:前端相关

最近发现2个Safari比较棘手的本地视频播放的问题,目前没有特别有效的规避方法,等待苹果官方的修正可能是最优解,所以打算通过这篇博文实时记录一下进展。


以下问题都仅在iPhone和iPad中出现,mac暂时没有发现。

所有问题均写了一个demo发布在了github上: https://github.com/eeg1412/safari-video-bug

同时为了方便演示,开启了github pages : https://eeg1412.github.io/safari-video-bug/

问题一:路由切换时本地视频会中断

问题描述

总所周知现在的前端代码都是通过 window.history.pushState(null, '', url) 来实现不刷新页面来切换页面的,这就使视频在切换路由时仍然能保持播放。

但是发现17.4.1之后,在切换路由后就会导致摄像头捕捉中断。

在演示代码中可以看见点击change history按钮后,路由发生变化,视频变成了黑屏,摄像头捕捉中断。

幸运的是目前这个问题并没有殃及一般视频的播放,仅仅影响摄像头的捕捉播放。

这个问题在今年年初就有人向官方反馈,beta版有这个BUG,正式版依然没有修😅。

解决方案

这个问题我目前的解决方案是把history模式改成hash模式。


问题二:视频元素中的内容不会跟随video标签的宽高变化而变化

问题描述

这个问题是比较神奇的一个现象,因为要触发条件比较苛刻,我大致归类了以下条件会触发:

  1. 视频播放本地摄像头
  2. 父级display从blog->flex
  3. video标签附近要有个img标签
  4. 似乎和img的尺寸也有关系?有些尺寸偶发,有些尺寸很难复现,有些尺寸很容易复现

我觉得最神奇的一点是附近必须要有一张大小合适的图片😅。最近可能比较倒霉,这么苛刻的条件都能给我遇上😅。

在演示网站中的效果如下:

可以看到红色区域是video元素,虽然video的宽高变了,但是内容始终保持原来的大小。

这个问题我看了下官方的反馈列表,目前并没有人反馈这个问题,于是就向苹果官方反馈了这个问题。

截至目前,官方给我的反馈是无法复现😅。

我看了眼官方的测试案例,苹果将我的代码放到了jsfiddle上进行测试,确实就复现不出来了。

后来我发现,如果内容是在<iframe>中运行的话确实就复现不出来了,很神奇。这才又建立了github pages,让苹果的技术人员通过github pages进行测试。

因为苹果官方和我有时差,通过邮件来回基本上也只能一天沟通一次,所以后续进展如何会更新在这里,敬请期待!

如果大家有兴趣的话,也可以用苹果手机试一试。

以下是复现步骤:

  1. 在iPhone(iOS 17.4.1)上打开链接:https://eeg1412.github.io/safari-video-bug/
  2. 允许摄像头访问。
  3. 等待相机画面出现在屏幕上。
  4. 单击摄像机源以更改视频的大小。

解决方案

这个问题我目前的解决是将原先的block->flex改成block->none->flex,进行强行重新渲染。


2024年5月4日更新:

官方已经修复【视频元素中的内容不会跟随video标签的宽高变化而变化】的问题

https://github.com/WebKit/WebKit/pull/28125

#safari
侧边栏
最新评论
广树
2024-05-21
@老张博客:哈哈哈,时尚说不上,主要喜欢的还是稳重感
老张博客
2024-05-21
看着就很时尚哟
广树
2024-05-20
@粽叶加米:表盘高分!👏
粽叶加米
2024-05-20
不便宜哟。表盘高分!
广树
2024-05-20
@ichika:你这么一说...哈哈哈,确实。都是MIKU。
正在攻略

圣兽之王.jpg

传颂之物

PSN奖杯卡

PSN奖杯卡

赞助商广告