1

我正在尝试动态创建一个以 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会为此抛出错误？

4

1 回答 1

3

以下片段对我有用...由于您自己没有提供完整的片段，因此我自己创建了一个。你只需要有一个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>

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

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

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

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

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

于 2013-10-22T15:19:25.767 回答