最近发现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