Android Edge浏览器中使用Blob URL作为视频源无法播放视频

问题根源分析 #

你当前的代码存在冗余的Blob转换步骤：先把fetch返回的Blob转成ArrayBuffer，再重新封装成新的Blob。这种多余操作可能导致Android Edge浏览器无法正确解析视频的编码格式或容器信息，进而引发无声的播放失败（无控制台报错是因为浏览器未抛出显性错误，但内部解析已失败）。另外，用setTimeout触发播放的方式不可靠，无法保证视频元数据已加载完成。

修复方案 #

1. 简化Blob处理流程

直接使用fetch返回的Blob对象，跳过不必要的ArrayBuffer转换，避免破坏视频文件的原始结构。

2. 改用事件监听触发播放

监听视频的loadedmetadata事件，确保视频元数据加载完成后再调用play()，替代不可靠的setTimeout。

3. 添加错误监听排查问题

给video元素添加error事件监听，捕获潜在的错误信息，方便后续排查。

修改后的代码示例 #

fetch("https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerMeltdowns.mp4")
  .then(videoResponse => videoResponse.blob())
  .then(blobData => {
    const videoSrc = URL.createObjectURL(blobData);
    const videoElement = document.getElementById('video');
    videoElement.src = videoSrc;

    // 监听元数据加载完成事件
    videoElement.addEventListener('loadedmetadata', () => {
      videoElement.play().catch(err => {
        // 捕获播放失败的错误
        console.error('播放失败:', err);
      });
    });

    // 监听视频加载错误
    videoElement.addEventListener('error', (e) => {
      console.error('视频加载错误:', e.target.error);
    });
  })
  .catch(err => {
    console.error('Fetch请求失败:', err);
  });

额外说明 #

• Android Edge对Blob的格式校验相对严格，多余的二进制数据转换会干扰浏览器对视频文件的识别，导致解析失败。
• 务必在play()方法后添加catch捕获错误，因为即使视频加载成功，也可能因浏览器的自动播放策略（如静音要求）导致播放失败。

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