Vidstack Player 在 iOS 上的视频源顺序问题解析

问题现象

Vidstack Player 是一款现代化的视频播放器组件，但在 iOS 设备上出现了一个有趣的现象：视频源(src)数组的顺序会影响视频能否正常播放。具体表现为当视频源数组中包含不支持格式(如 webm)时，播放器可能会错误地尝试加载不支持的格式，而不是自动回退到支持的格式。

技术背景

在 HTML5 视频播放中，浏览器会根据<video>元素内<source>标签的顺序依次尝试加载视频源，直到找到第一个可播放的格式。这是一种标准的回退机制设计。Vidstack Player 作为高级封装组件，理论上应该保持与原生视频元素相同的行为逻辑。

问题复现

通过实际测试发现，在 iOS 17.2 系统的 iPhone 14 Pro 上，当使用以下配置时：

src={[
  { type: "video/mp4", src: "/video.mp4" },
  { type: "video/webm", src: "/video.webm" },
]}

播放器会错误地尝试加载 webm 格式(虽然 iOS 不支持)，导致播放失败。而如果将顺序调换：

src={[
  { type: "video/webm", src: "/video.webm" },
  { type: "video/mp4", src: "/video.mp4" },
]}

则能正常播放 mp4 格式的视频。这与原生<video>元素的行为不一致，原生元素会正确地从上到下尝试每个源直到找到可播放的格式。

问题分析

这个问题的根源在于 Vidstack Player 在 iOS 平台上的源选择逻辑存在缺陷。理想情况下，播放器应该：

1. 按照提供的顺序依次检查每个视频源
2. 通过能力检测判断当前平台是否支持该格式
3. 选择第一个可支持的格式进行加载

但实际实现中，播放器可能没有正确执行格式支持性检查，或者检查逻辑与源顺序处理存在冲突，导致在特定顺序下选择了不支持的格式。

解决方案

开发团队已经确认并修复了这个问题，修复方案主要涉及：

1. 完善格式支持性检测逻辑
2. 确保严格按照源数组顺序进行尝试
3. 保持与原生视频元素一致的回退行为

对于开发者而言，在修复版本发布前，可以暂时通过调整源顺序作为临时解决方案，但建议尽快升级到修复后的版本以获得最可靠的行为。

最佳实践

在使用 Vidstack Player 提供多格式视频源时，建议：

1. 将最广泛支持的格式(如 mp4)放在前面
2. 提供至少一个兼容性最好的回退格式
3. 测试不同设备和平台上的播放行为
4. 关注播放器更新，及时应用修复版本

这种多格式支持策略不仅能解决 iOS 上的问题，也能为各种浏览器和设备提供最佳的兼容性保障。