Safari: unable to dynamically load video from blob url

Question

i'm trying to implement a dynamic loading for an html5 video tag.

when a user picks a video file via the <input type="file"> element, i want to load it dynamically to a <video> element, and append it to body.

the following code works on Chrome but not on Safari:

function load_video(file) { // this came from <input type="file"> change event
    var reader = new FileReader();
    reader.onload = function(event) {
        var blob = new Blob([event.target.result]);
        window.URL = window.URL || window.webkitURL;
        var blobURL = window.URL.createObjectURL(blob);
        $('body').append('<video controls width="320" src="' + blobURL + '" onloadedmetadata="alert('loaded meta data!')"></video>');
    }
}

now, if i'll replace src="' + blobURL + '" with a local filepath, say- /media/videos/vid1.mp4, the video loads in Safari as well, but I need it to load the video from blobURL.

any suggestions?

thanks alot.

UPDATE:

as Rod says, unfortunately it's a known bug in Safari (not supported by it's media backend).

Prognathous

Answer 1

I have the same exact issue with Safari 6.1, getting MEDIA_ERR_SRC_NOT_SUPPORTED when trying to load a file from an input, like so:

var fileInput = document.querySelector('#file'),
    video = document.querySelector('video');

fileInput.addEventListener('change', function(evt){
  evt.preventDefault();
  var file = evt.target.files[0];
  var url = window.URL.createObjectURL(file);
  video.src = url;

  video.addEventListener('error', function(err){
    // This craps out in Safari 6
    console.error(video.error, err);
    alert('nay :(');
  });
});

Try video.addEventListener('error', logError) or something to figure out if you have the same issue. I suspect Safari doesn't support yet videos with blob-type source.

UPDATE: Yup, it's a bug. See https://bugs.webkit.org/show_bug.cgi?id=101671 and help us let the webkit maintainers this is something that needs to be fixed.

UPDATE, 2015: It works now, updated the code.

Il

Has this been fixed in later iOS Safari? I'm unable to find any info and the bug has not been updated – Snuggle

Here you go buddy, a way for you to find out yourself: bl.ocks.org/unRob/3bd07a012597aa959c92 – Il

What is that? Is it a page running a Safari backend or just the code that puts a blob url in a video tag? – Snuggle

Sorry, I thought the code would be self-explanatory. It's a way to test if the bug has been fixed in whatever iOS you'd be willing to test it in; whereas I've seen it work in v9.0, can't really say what will happen to any other versions. – Il

Ok, the code is exactly the same as what I've tested and I couldn't get it to work on iOS 7.1 so I guess it's not supported. Thanks! – Snuggle

Answer 2

I don't know if the solution applies to video as well as audio, but I had the same issue with Safari audio and I discovered that the solution was to specify the content type when constructing the blob:

var blob = new Blob([arrayBuffer], {type: 'audio/mpeg'});
url = webkitURL.createObjectURL(blob);

Beckiebeckley

Seems like this one has just solved my problem when I tried to fetch duration from blob url with the built in audio's loadedmetadata event. Thanks! – Carse

Answer 3

const blob = new Blob([arrayBuffer], {type: 'video/mp4'});

Lombardy

This answer needs more explanation that would be better by providing more detail. – Impressionable