CODEWITHSUNDEEP
javascriptjqueryfirefoxhtml5-videoblob
geevee
geevee

Reputation: 5461

Firefox: dynamic loading of blob url into video tag causes MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED (javascript)

i'm trying to dynamically create an html5 video tag loaded with blob_url as source.

i'm listening to 2 events: loadedmetadata and error.

with Chrome browser i get loadedmetadata event fired just like i want, but with Firefox i get the error event fired, with error code of 4 (MEDIA_ERR_SRC_NOT_SUPPORTED).

code:

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); });
}

can anyone give me a clue why firefox throws an error for that?

Upvotes: 1

Views: 2917

Answers (1)

nmaier
nmaier

Reputation: 33192

The following snippet works for me... As you didn't provide a complete snippet yourself, I created one myself. You'd only need to have a cas.webm yourself.

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

So, since blob URIs work, this leaves the media format. Please note that Firefox does not necessarily support all formats yet that Chrome supports, notably H.264/MP4, AAC, MP3 and VP9 are not available on all platforms yet or at all. See Supported media formats. Watch the Web Console for errors such as:

HTTP "Content-Type" of "video/mp4" is not supported. Load of media resource blob:d83a2aa5-0c28-f044-b3ef-dcabbf59c6ed failed. @ https://example.org/cas.html

Also, the type sniffer might mess up. You could use a <source type="..." src="..."> tag to work around that.

Make sure the blob contains the data you expect it to contain. At the very least use the Web Console or Network view to verify that any request(s) you may use to construct the blob actually succeed (or use a full blown network sniffer).

Without a reproducible, self-contained sample, I cannot really diagnose the actual problem you're seeing, but these pointers are likely good enough to let you diagnose the issue yourself.

Upvotes: 3

Related Questions