iPhone端Base64嵌入视频无法加载的解决方案或替代实现求助

• 优先排查基础配置问题
  iOS Safari原生不支持WebM格式，需将MP4格式的source标签放到WebM前面，优先加载兼容资源。同时补充iOS端必需的video属性，修正后的标签示例：

  <video id="objvideo" playsinline muted preload="auto" width="你的视频宽度" height="你的视频高度">
    <source type="video/mp4" src="data:video/mp4;base64,[你的mp4 base64数据]">
    <source type="video/webm" src="data:video/webm;base64,[你的webm base64数据]">
  </video>
  

  必须确认你的MP4文件采用H.264编码（Baseline/Main Profile，不可使用High Profile）、音频采用AAC编码，不符合编码规范的MP4在iOS Safari上默认无法解码。
  如果需要主动触发播放，必须将play()调用绑定在用户触摸/点击等交互事件的回调函数中，iOS Safari禁止非交互触发的媒体播放行为。

• 用MediaSource API适配范围请求限制
  iOS Safari要求所有视频资源必须支持HTTP范围请求才能正常加载，Base64和普通Blob URL默认不满足该要求，可以通过MediaSource API手动喂流解决，示例代码：

  // 把base64转为ArrayBuffer
  function base64ToArrayBuffer(base64) {
    const binary = atob(base64.split(',')[1]);
    const len = binary.length;
    const bytes = new Uint8Array(len);
    for (let i = 0; i < len; i++) {
      bytes[i] = binary.charCodeAt(i);
    }
    return bytes.buffer;
  }
  
  const video = document.getElementById('objvideo');
  const mediaSource = new MediaSource();
  video.src = URL.createObjectURL(mediaSource);
  
  mediaSource.addEventListener('sourceopen', () => {
    // 注意codecs参数要和你实际的MP4编码匹配，避免解码失败
    const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
    const videoBuffer = base64ToArrayBuffer('你的mp4 base64完整字符串');
    sourceBuffer.appendBuffer(videoBuffer);
    sourceBuffer.addEventListener('updateend', () => {
      mediaSource.endOfStream();
      // 建议在用户交互事件中调用play，此处仅为示例
      video.play().catch(e => console.log('需用户交互触发播放', e));
    });
  });
  

• 兜底兼容方案（无任何兼容问题）
  如果你对文件大小要求不高，可以提前把视频逐帧导出为PNG/JPG序列，全部转成Base64存入JS数组，用Canvas手动控制逐帧刷新模拟视频播放，该方案可以100%兼容所有浏览器包括老旧iOS版本。

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