Firefox：将 blob url 动态加载到视频标签中会导致 MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED (javascript)答案

【问题标题】：Firefox: dynamic loading of blob url into video tag causes MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED (javascript)Firefox：将 blob url 动态加载到视频标签中会导致 MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED (javascript)
【发布时间】：2013-10-22 11:23:52
【问题描述】：

我正在尝试动态创建一个以 blob_url 作为源加载的 html5 视频标签。

我正在收听 2 个事件：loadedmetadata 和 error。

使用 Chrome 浏览器时，我会像我想要的那样触发 loadedmetadata 事件，但使用 Firefox 时，我会触发 error 事件，错误代码为 4 (MEDIA_ERR_SRC_NOT_SUPPORTED)。

代码：

function add_video(blob_url, id) {
    html = '<video id="' + id + '" src="' + blob_url + '"></video>';
    $('body').append(html);
    var vid = document.getElementById(id);
    vid.addEventListener('loadedmetadata', function(){ alert('loaded!'); });
    vid.addEventListener('error', function(){ alert('error! ' + this.error.code); });
}

谁能告诉我为什么 firefox 会为此抛出错误？

【问题讨论】：

标签： javascript jquery firefox html5-video blob

【解决方案1】：

以下 sn-p 对我有用...由于您自己没有提供完整的 sn-p，因此我自己创建了一个。您只需要自己拥有一个cas.webm。

<!DOCTYPE html>
<script>
addEventListener("load", function() {
  var r = new XMLHttpRequest();
  r.onload = function() {
    var vid = document.createElement("video");
    vid.addEventListener('loadedmetadata', function(){ alert('loaded!'); });
    vid.addEventListener('error', function(){ alert('error! ' + this.error.code); });
    vid.setAttribute("autoplay", "autoplay");
    vid.setAttribute("loop", "loop");
    vid.setAttribute("src", URL.createObjectURL(r.response));
    document.body.appendChild(vid);
  };
  r.open("GET", "cas.webm");
  r.responseType = "blob";
  r.send();
}, false);
</script>

所以，由于blob URI 可以工作，这就留下了媒体格式。请注意，Firefox 不一定支持 Chrome 支持的所有格式，特别是 H.264/MP4、AAC、MP3 和 VP9 尚未在所有平台上可用或根本不可用。见Supported media formats。观察 Web 控制台中的错误，例如：

不支持“video/mp4”的 HTTP“Content-Type”。加载媒体资源 blob:d83a2aa5-0c28-f044-b3ef-dcabbf59c6ed 失败。 @https://example.org/cas.html

此外，类型嗅探器可能会搞砸。你可以使用<source type="..." src="..."> 标签来解决这个问题。

确保 blob 包含您希望它包含的数据。至少使用 Web 控制台或网络视图来验证您可能用于构建 blob 的任何请求是否确实成功（或使用成熟的网络嗅探器）。

如果没有可重复的、独立的样本，我无法真正诊断您所看到的实际问题，但这些提示可能足以让您自己诊断问题。

【讨论】：