Firefox：动态加载blob url到视频标签会导致MediaError.MEDIA\u ERR\u SRC\u不受支持（javascript）_Javascript_Jquery_Firefox_Html5 Video_Blob

Firefox：动态加载blob url到视频标签会导致MediaError.MEDIA\u ERR\u SRC\u不受支持（javascript）

javascript jquery firefox

Firefox：动态加载blob url到视频标签会导致MediaError.MEDIA\u ERR\u SRC\u不受支持（javascript）,javascript,jquery,firefox,html5-video,blob,Javascript,Jquery,Firefox,Html5 Video,Blob,我正在尝试动态创建一个html5视频标签，并将blob_url作为源加载我正在听两个事件：loadedmetadata和error 使用Chrome浏览器，我可以像我想要的那样触发loadedmetadata事件，但使用Firefox，我会触发error事件，错误代码为4（不支持媒体错误）代码：函数添加视频（blob\u url，id）{ html=''； $（'body'）.append（html）； var vid=document.getElementById（id）； vid.ad

我正在尝试动态创建一个html5视频标签，并将blob_url作为源加载

我正在听两个事件：

loadedmetadata

和

error

使用Chrome浏览器，我可以像我想要的那样触发

loadedmetadata

事件，但使用Firefox，我会触发

error

事件，错误代码为4（不支持媒体错误）

代码：

函数添加视频（blob\u url，id）{
html=''；
$（'body'）.append（html）；
var vid=document.getElementById（id）；
vid.addEventListener（'loadedmetadata'，function（）{alert（'loaded！'）；}）；
vid.addEventListener（'error'，function（）{alert（'error！'+this.error.code）；}）；
}

有人能告诉我为什么firefox会为此抛出错误吗？

下面的代码片段对我很有用。。。由于您自己没有提供完整的代码片段，所以我自己创建了一个。您只需要自己拥有一个

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>


addEventListener（“加载”，函数（）{
var r=新的XMLHttpRequest（）；
r、 onload=函数（）{
var vid=document.createElement（“视频”）；
vid.addEventListener（'loadedmetadata'，function（）{alert（'loaded！'）；}）；
vid.addEventListener（'error'，function（）{alert（'error！'+this.error.code）；}）；
vid.setAttribute（“自动播放”、“自动播放”）；
vid.setAttribute（“循环”、“循环”）；
vid.setAttribute（“src”，URL.createObjectURL（r.response））；
文件.正文.附件（vid）；
};
r、 打开（“GET”、“cas.webm”）；
r、 responseType=“blob”；
r、 send（）；
}，假）；

因此，由于

blob

uri起作用，这就保留了媒体格式。请注意，Firefox并不一定支持Chrome支持的所有格式，尤其是H.264/MP4、AAC、MP3和VP9，但并非所有平台都支持。看见观察Web控制台是否存在以下错误：

不支持“视频/mp4”的HTTP“内容类型”。加载媒体资源blob:d83a2aa5-0c28-f044-b3ef-dcabbf59c6ed失败。@

此外，类型嗅探器可能会出错。你可以用一个标签来解决这个问题

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

如果没有一个可复制的、自包含的样本，我无法真正诊断您看到的实际问题，但是这些指针可能足够好，可以让您自己诊断问题

<!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>