iOS设备无法播放Blob源HTML5视频的技术问题求助

你遇到的MediaError错误码4为MEDIA_ERR_SRC_NOT_SUPPORTED，本质是iOS端视频播放器无法识别你提供的Blob URL源，按照以下步骤逐步修复即可：

1. 修正变量名匹配问题
   你downloadVideo返回的对象中存储对象URL的键是vidURL，但代码中给video标签赋值时用的是downloadedVideo.url，先确认该问题是否为笔误，如果是实际代码的问题先修正。
2. 调整video标签属性
   给video标签新增playsInline属性，iOS Safari对非全屏播放的视频强制要求该属性，否则会自动弹出全屏播放器且可能触发加载失败：

<video
    muted={true}
    autoPlay={true}
    loop={false}
    playsInline={true}
    ref={videoRef}
    onError={err => {
      alert('Video load error. ' + err.target.error.message);
    }}
/>

3. 调整Blob URL赋值时机
   不要直接在JSX中绑定src属性，通过ref获取video DOM元素，在拿到Blob URL后手动赋值并调用load()方法触发iOS端的视频加载流程：

const videoRef = useRef(null);

// 在downloadVideo执行完成后执行以下逻辑
const { vidURL } = await downloadVideo(videoUrl);
if (videoRef.current) {
  videoRef.current.src = vidURL;
  videoRef.current.load();
  // 如需自动播放可以在loadedmetadata事件触发后调用play
  videoRef.current.addEventListener('loadedmetadata', () => {
    videoRef.current.play().catch(e => console.log('播放失败', e));
  });
}

4. 优化Blob创建逻辑
   直接使用XHR返回的Blob响应，不需要再手动封装一层Blob，避免iOS识别异常：

// 将downloadVideo中的对应代码替换为
var videoBlob = this.response;
// 仅在服务端返回的type不正确时手动修正
if (videoBlob.type !== 'video/mp4') {
  videoBlob = new Blob([this.response], { type: 'video/mp4' });
}

5. 备选兼容方案
   如果以上方案都不生效，说明当前iOS版本对全量Blob的直接播放存在限制，可改用Service Worker拦截视频请求的方式实现缓存：将完整视频存入IndexedDB后，Service Worker拦截video标签对原始视频地址的请求，根据请求的Range头部返回对应分片内容，完全兼容iOS端对视频范围请求的要求，同时保留缓存能力。

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