iOS 15 Safari中Data URI格式行内视频播放异常问题咨询

问题根因 #

iOS 15 Safari 对所有媒体资源默认要求支持Range: bytes分段请求，而Data URI本质是静态编码字符串，无法响应分段请求规则，导致浏览器反复拉取全量Data URI内容，内存占用飙升，最终出现播放启动失败、卡顿、启动慢的问题。

可行Workaround #

方案1：Data URI 转 Blob URL 挂载（最推荐，兼容性最优） #

该方案为纯客户端本地内存操作，不会产生独立资源存储，完全符合业务约束。
操作步骤：

1. 将业务侧拿到的Data URI字符串转换为Blob对象
2. 调用URL.createObjectURL()生成本地临时资源链接，赋值给video的src属性
3. 页面卸载或视频播放完成后调用URL.revokeObjectURL()释放内存，避免泄漏
   代码示例：

// Data URI 转 Blob 工具函数
function dataURItoBlob(dataURI) {
  const byteString = atob(dataURI.split(',')[1]);
  const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
  const buffer = new ArrayBuffer(byteString.length);
  const uint8Array = new Uint8Array(buffer);
  for (let i = 0; i < byteString.length; i++) {
    uint8Array[i] = byteString.charCodeAt(i);
  }
  return new Blob([buffer], { type: mimeString });
}

// 业务调用逻辑
const videoEl = document.querySelector('video');
const rawVideoDataURI = '你的业务侧视频Data URI字符串';
const videoBlob = dataURItoBlob(rawVideoDataURI);
const localBlobURL = URL.createObjectURL(videoBlob);
videoEl.src = localBlobURL;

// 页面卸载时释放内存
window.addEventListener('beforeunload', () => {
  URL.revokeObjectURL(localBlobURL);
});

方案2：video 标签属性优化（仅适合1MB以内小视频） #

如果不想做编码转换，可给video标签添加以下属性，降低Range请求触发概率：

<video preload="auto" playsinline webkit-playsinline>
  你的浏览器不支持视频播放
</video>

该方案依赖浏览器兼容，大视频场景下仍可能出现卡顿问题。

方案3：MSE 分段喂流（适合5MB以上大视频） #

针对大体积视频场景，可使用MediaSource Extensions接口，将Data URI解码后的二进制数据按分段规则喂给媒体源，完全适配Safari的分段请求逻辑，播放流畅度最高，实现复杂度略高于方案1。

额外优化建议 #

• 视频编码优先选择H.264视频编码 + AAC音频编码，是iOS Safari硬解码支持最好的格式，可大幅降低解码开销
• 尽量控制单个Data URI视频体积不超过10MB，超出体积即使走workaround也可能触发系统内存告警

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