I'm attempting to load local video files and embedding them in my web application. To do this, I use the createObjectUrl() method on the file retrieved either from drag and drop, or from a file input. I then set the source of a video element to that URL, with the intent that it would properly load the video into the DOM. And while this works in both Chrome and Firefox (the latest nightly builds, at least) it's not working in Safari. It doesn't report an error. It doesn't render anything. The video element remains blank, even though the source of that element is properly set to the blob. The example in the URL works in both Firefox and Chrome with the respectively supported file formats. I've attempted in Safari with a number of different video formats, including h264.
Safari media back-end does not support loading blob: urls in <video> elements.
Is this something that Safari will eventually support? It works, I believe, with image attributes already.
Still happening on Safari 6.1 with: var file; // the file from <input type="file" var url = window.URL.createObjectURL(file); console.log(url); // blob:somehost.com/some-long-uuid var video = document.createElement('video'); video.src = url; // When chrome, these work // video.addEventListener('progress', videoEvents.progress); // video.addEventListener('seeked', videoEvents.seeked); video.addEventListener('error', function(err){ // Nothing to see here... console.log(err); // Will throw a MediaError code 4 console.log(video.error); }); throwing a MediaError code 4 for a h.264 baseline 3.0 file.