javascript - 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).

Answer 1

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