Bug 101671 - createObjectUrl not working with <video src> attribute
Summary: createObjectUrl not working with <video src> attribute
Status: UNCONFIRMED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Media (show other bugs)
Version: 528+ (Nightly build)
Hardware: Mac OS X 10.8
: P2 Normal
Assignee: Nobody
URL: http://jsfiddle.net/bmcmahen/6zLaX/2/
Keywords:
Depends on:
Blocks:
 
Reported: 2012-11-08 17:17 PST by Ben
Modified: 2014-01-02 12:51 PST (History)
6 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Ben 2012-11-08 17:17:18 PST
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.
Comment 1 Jer Noble 2012-11-09 09:18:01 PST
Safari media back-end does not support loading blob: urls in <video> elements.
Comment 2 Ben 2012-11-09 09:32:21 PST
Is this something that Safari will eventually support? It works, I believe, with image attributes already.
Comment 3 Rob Hidalgo 2013-10-03 19:09:58 PDT
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.