iOS 17.0.2版Safari Mobile加载Blob视频功能失效问题咨询

这大概率是iOS 17.0.x版本Safari Mobile的已知兼容性问题，并非你的代码逻辑错误。

问题原因 #

在iOS 17.0至17.0.2的Safari移动端中，存在URL.createObjectURL()处理视频Blob时的异常：生成的Object URL无法被video标签正确解析，而桌面端Safari、旧版iOS Safari均无此问题。

解决方案 #

• 直接使用静态资源URL（推荐）
  既然视频是本地静态资源，无需经过fetch和Blob转换，直接将require返回的URL赋值给video标签即可：

  async loadVideo () {
      let url = require('@/assets/[VIDEO_FILE].mp4');
      document.getElementById('myVideo').src = url;
  },
  

• 重新构造Blob（需预处理场景）
  如果必须对视频内容做Blob级别的预处理，可先将响应转为arrayBuffer再重新构造Blob，绕过原解析问题：

  async loadVideo () {
      let url = require('@/assets/[VIDEO_FILE].mp4');
      const res = await fetch(url);
      const buffer = await res.arrayBuffer();
      const blob = new Blob([buffer], { type: 'video/mp4' });
      document.getElementById('myVideo').src = URL.createObjectURL(blob);
  },
  

• 升级iOS系统
  Apple在iOS 17.1及后续版本中修复了该Blob兼容性问题，升级到最新系统版本后问题会自动解决。

额外注意 #

• 确保video标签的type属性设置为video/mp4，避免浏览器解析出错
• 测试前清空Safari缓存，排除旧资源干扰

内容的提问来源于stack exchange，提问作者Drizzt