iOS无法读取带媒体片段的Blob视频链接，保留Blob源如何修复？

问题原因 #

iOS 系统的 Safari 内核对 Blob URL 的哈希片段解析存在兼容缺陷：普通 HTTP/HTTPS URL 后的 #t=xxx 媒体片段参数可以被正常识别，但 Blob URL 后的哈希参数会被内核直接截断丢弃，导致媒体资源无法被正确解析加载。

修复方案 #

无需修改 Blob 视频源本身，移除 <source> 标签 src 属性后的媒体片段参数，通过 JS 监听视频元数据加载完成后主动跳转至指定时间点，即可实现相同的缩略图效果，同时兼容安卓、iOS 双端。

修改后的代码示例 #

HTML 部分

<video preload="auto" controls="controls" id="targetVideo">
   <source data-v-3e35226f="" src="blob:http://localhost:8080/0dc9b1e1-5a6c-48c9-9618-3c8f1826dbfd" type="video/mp4">
   <source data-v-3e35226f="" src="blob:http://localhost:8080/0dc9b1e1-5a6c-48c9-9618-3c8f1826dbfd" type="video/quicktime">
</video>

JS 控制部分

const video = document.getElementById('targetVideo');
// 监听视频元数据加载完成事件
video.addEventListener('loadedmetadata', function() {
  // 跳转到指定时间点，生成首帧缩略图
  this.currentTime = 0.001;
});
// 兼容iOS主动触发资源加载，部分iOS版本不会自动触发preload配置的加载逻辑
video.load();

注意事项 #

• 该方案完全保留 Blob URL 作为视频源，仅调整参数传递方式，双端均可正常运行
• 如需批量处理多个视频，可给视频标签添加统一类名批量绑定事件即可
• 若不需要自动播放，无需添加autoplay属性，上述逻辑仅调整初始展示帧不会触发自动播放

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