Safari: unable to dynamically load video from blob-url

Question

I am trying to implement dynamic loading for an html5 tag.

when the user selects a video file through the <input type="file"> element, I want to dynamically load it into the <video> element and add it to the body.

The following code works in Chrome, but not in 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>'); } } 

currently, if I replaced src="' + blobURL + '" with a local file path, say /media/videos/vid1.mp4 , loading the video in Safari too, but I need to download the video from blobURL .

any suggestions?

Thank you very much.

UPDATE:

as Rod says, unfortunately, this is a known bug in Safari (not supported by its backend).

Answer 1

I have the same problem with Safari 6.1, getting MEDIA_ERR_SRC_NOT_SUPPORTED when trying to download a file from the input, for example:

 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 find out if you have the same problem. I suspect Safari does not yet support videos with a blob -type source.

UPDATE : Yes, this is a mistake. See https://bugs.webkit.org/show_bug.cgi?id=101671 and help us let web whale supporters do something that needs to be fixed.

UPDATE, 2015 : now it works, updates the code.

Answer 2

I don’t know if the solution applies to video as well as audio, but I had the same problem with the Safari audio file, and I found that the solution should indicate the type of content when constructing the blob:

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