我正在尝试动态创建一个以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会为此抛出错误？
以下代码段对我有用：由于您自己没有提供完整的代码段，因此我自己创建了一个代码段。您只需要拥有一个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控制台中的错误，例如：
不支持HTTP的“ video / mp4”的“ Content-Type”。媒体资源Blob：d83a2aa5-0c28-f044-b3ef-dcabbf59c6ed的加载失败。@ https://example.org/cas.html
另外，嗅探器的类型可能会弄乱。您可以使用<source type="..." src="...">标签来解决此问题。
确保斑点包含您期望包含的数据。至少要使用Web控制台或“网络”视图来验证您用于构造Blob的任何请求是否确实成功（或使用完整的网络嗅探器）。
如果没有可复制的，自包含的样本，我将无法真正诊断您遇到的实际问题，但是这些指标可能足以让您自己诊断问题。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句