edge 的 video 标签无法播放来自URL.createObjectURL()创建的链接

Question

edge 的 video 标签无法播放来自URL.createObjectURL()创建的链接

body a 0

video 标签无法播放来自URL.createObjectURL()创建的链接。会显示视频已损坏图标。

0 个注释

1 个答案

你的答案

Answer 1

Francisco Montilla 31,820 独立顾问

Hello,

The most common cause in Edge is that the object URL is being revoked too early. If you call URL.revokeObjectURL right after assigning video.src, Edge may show the broken video icon because the decoder has not finished reading from the blob yet.

Wrong pattern:

const url = URL.createObjectURL(blob);
video.src = url;
URL.revokeObjectURL(url); // too early in Edge

Correct pattern. Revoke only after the media is ready:

const url = URL.createObjectURL(blob);
video.src = url;
video.addEventListener('loadeddata', () => {
  URL.revokeObjectURL(url);
});

If you attach sources dynamically, you can also wait for canplay or canplaythrough. As a quick test, simply remove the revoke line and reload. If the video plays, the timing was the issue.

If this change does not help, tell me and I will walk you through the next fix.

body a 0 信誉分

2025-11-14T07:11:46.71+00:00

感谢你您的回复，但是，这里存在一个问题。即使不调用 URL.revokeObjectURL 函数，也无法播放视频
body a 0 信誉分

2025-11-14T07:12:12.1766667+00:00

body a 0

   const fileElem = document.getElementById("fileElem");   

const wrapper = document.getElementById("wrapper");

const btn = document.getElementById("btn");

 btn.onclick = () => {

const file = fileElem.files[0];

 const video = document.createElement("video")

const url = URL.createObjectURL(file)

   video.src = url;

video.controls = true

wrapper.appendChild(video)

};

Francisco Montilla 31,820 信誉分独立顾问

2025-11-15T04:07:58.95+00:00
你的代码很好。您在 Edge 中看到的几乎总是编解码器问题，而不是 Blob 或 URL.createObjectURL 问题。如今，里面的许多手机视频 .mp4 都用进行编码HEVC H.265，但 Windows 和 Edge 无法HEVC开箱即用地解码。当解码器丢失时，即使源是完全有效的对象 URL，视频元素也会显示损坏的媒体图标。

安装 **Microsoft 的 HEVC 视频扩展，**然后重新启动 Edge 并重试您的页面。打开 Microsoft Store，搜索 HEVC Video Extensions，安装它，然后重新启动 Edge。扩展名出现后，应从 blob URL 播放同一文件，并直接在新选项卡中打开。

如果在测试时希望在代码中进行一行确认，请附加错误侦听器并检查 MediaError code 4 哪个指示不支持该格式。

video.addEventListener('error', () => console.log('media error', video.error && video.error.code));

如果安装 HEVC 扩展没有改变结果，请告诉我您看到的值 video.error.code 和文件的确切编解码器，我会给您下一步。
body a 0 信誉分

2025-11-15T04:34:28.3+00:00

media error: (4) PipelineStatus::DEMUXER_ERROR_DETECTED_AAC

我将视频上传到服务器，使用来自网络的url时，video 能够正常播放。

使用 fetch("web url")，然后调用 blob()，获取这个能正常播放视频的blob，创建 blob 的ObjectURL，然后设置video的src属性，视频不能正常播放了。
Francisco Montilla 31,820 信誉分独立顾问

2025-11-16T04:58:03.8466667+00:00
media error 4 并带有 DEMUXER_ERROR_DETECTED_AAC 在 Edge 上通常意味着这个 MP4 里使用了 HE-AAC 或带 SBR 的 AAC，而当你用 blob: 对象 URL 播放时，Chromium 的本地解复用与解码链路对这类 AAC 不稳定。直接把同一个 http(s) URL 赋给 <video> 时，Edge 会走 Windows 的 Media Foundation 管道，所以可以正常播放。换成 fetch(...).blob() 再 createObjectURL 时就失败，这正符合你现在的现象。

最直接也最稳妥的解决办法是把音轨转成标准 AAC-LC，并把 moov 索引移到文件前部。这样无论是网络 URL 还是 blob: 都能播放。

你可以用 FFmpeg 这样处理一次文件。

ffmpeg -i input.mp4 -c:v copy -c:a aac -profile:a aac_low -movflags +faststart output.mp4

解释如下。保留原视频流不重编码。只把音频转为 AAC-LC。-movflags +faststart 会把 moov 移到前面，进而也优化 blob: 播放的起始解析。把生成的 output.mp4 放回你当前的流程里，再用 URL.createObjectURL 赋给 video.src 即可验证。
body a 0 信誉分

2025-11-16T06:25:17.24+00:00

我执行这个命令并在 video 标签里播放 output.mp4 ，得到了相同的错误：

media error: (4) PipelineStatus::DEMUXER_ERROR_DETECTED_AAC

需要注意的是：错误发生在 android edge (v142.0) 而不是 windows edge， windows上的 edge 能正常播放 blob 视频，但 android 上的不能。
Francisco Montilla 31,820 信誉分独立顾问

2025-11-17T06:06:37.2866667+00:00
而当你用 blob: 对象 URL 播放时，Chromium 的本地解复用与解码链路对这类 AAC 不稳定。直接把同一个 http(s) URL 赋给 <video> 时，Edge 会走 Windows 的 Media Foundation 管道，所以可以正常播放。换成 fetch(...).blob() 再 createObjectURL 时就失败，这正符合你现在的现象。

最直接也最稳妥的解决办法是把音轨转成标准 AAC-LC，并把 moov 索引移到文件前部。这样无论是网络 URL 还是 blob: 都能播放。

你可以用 FFmpeg 这样处理一次文件。

ffmpeg -i input.mp4 -c:v copy -c:a aac -profile:a aac_low -movflags +faststart output.mp4

解释如下。保留原视频流不重编码。只把音频转为 AAC-LC。-movflags +faststart 会把 moov 移到前面，进而也优化 blob: 播放的起始解析。把生成的 output.mp4 放回你当前的流程里，再用 URL.createObjectURL 赋给 video.src 即可验证。
body a 0 信誉分

2025-11-17T06:14:03.62+00:00

我已经尝试过使用ffmpg处理我的视频，但 Android Edge 依然会报告这个错误。Windows Edge 可以正常播放，不会报告这个错误。

这似乎是在 android edge 上是一个 bug。

Francisco Montilla 31,820 独立顾问

是的，这看起来像是 Android 版 Edge 的回归问题。当前的解决方法是在 Android Edge 上避免使用 blob URL，而改用网络 URL。对其他浏览器仍然保持 blob 流程。

下面是一个可直接使用的模式：

async function playMp4(video, httpUrl) {
  const isAndroidEdge = /\bEdgA\b/i.test(navigator.userAgent);

  if (isAndroidEdge) {
    video.src = httpUrl; // 在 Android Edge 上避免使用 blob
    video.load();
    return;
  }

  const res = await fetch(httpUrl, { cache: 'no-store' });
  const ab = await res.arrayBuffer();
  const blob = new Blob([ab], { type: 'video/mp4' });
  const url = URL.createObjectURL(blob);

  video.src = url;
  video.load();
  video.addEventListener('loadeddata', () => URL.revokeObjectURL(url), { once: true });
}

像这样使用它：

const video = document.querySelector('video');
playMp4(video, 'https://your.cdn/video.mp4');

这可以让 Windows Edge 和其他浏览器继续使用快速的 blob 路径，而将 Android Edge 引导到可正常播放的直接 URL。如果在进行此更改后仍然遇到问题，请告诉我，我会给你下一步建议。