Question

In my application I need to make sure that a user has set a video as source of my html5 video player, before continuing with the other actions. So I tried this (using Firebug in Firefox):

When user has set a source for the videoplayer

vp = $('#myvideoplayer')
vp.attr('src')  --> "blob:5c254454-6c4e-4b69-b381-9ad60d6b1c4a"

when no source is set for the video

vp.attr('src')  --> undefined

Can I use this to detect if a user has set the video source or not?

if(vp.attr('src') != undefined){
   let_user_do_next_action();
}

Or is there any better way?

p.s:

I am setting the source of video using an HTML5 file input widget as follows. (This works only in Firefox, since Chrome doesn’t allow createObjectURL from window.webkitURL for some reason.)

var file = $('#fileselect').get(0).files[0];
if (file==undefined){
    alert('no file chosen');
}
var myURL = window.URL || window.webkitURL;
var fileURL = myURL.createObjectURL(file);
if(fileURL){
    player = $('#myvideoplayer');
    player.src=fileURL;
    player.load();
}
return;

Answer 1

That code should work, or if you want to be foolproof, check typeof vp.attr('src') == "undefined".Though if you don’t use jQuery you might want to check element.hasAttribute("src") instead.

About window.webkitURL.createObjectURL, I think Chrome restricts stuff when you’re testing it locally (e.g. on a file:// URL), and you’d either have to set up a simple HTTP server on localhost, or start Chrome with --allow-file-access-from-files.