for school I need to use a HTML5 videoplayer with extra controls and the option to choose a file from local drive. The page runs local, too. So it is not uploaded. The files (HTML and video) are in the same local folder.

For the choose-thing I use a form with <form><input type="file" id="chosen" /><button type="submit" onclick="open();">Change</button></form>. Now here is my JavaScript that should manipulate the source of the videoplayer:

function open()
{
    var file=document.getElementById('chosen');
    var fileURL = window.URL.createObjectURL(file);
    player.src=fileURL;
    player.load();
}

The videoplayer looks like this:

<video id=player>
<source src="big-buck-bunny_trailer.webm" type="video/webm" />
<source src="trailer_480p.mov" type"video/mp4" />
</video>

and of course I have connected the variable "player" with my videoplayer. The player.load()-thing works properly, so the function gets called correctly.

Now my question: What's wrong or missing in the Javascript-Part? The project doesn't work as explained.

Maybe you can help me. Thanks ;)

for school I need to use a HTML5 videoplayer with extra controls and the option to choose a file from local drive. The page runs local, too. So it is not uploaded. The files (HTML and video) are in the same local folder.

For the choose-thing I use a form with <form><input type="file" id="chosen" /><button type="submit" onclick="open();">Change</button></form>. Now here is my JavaScript that should manipulate the source of the videoplayer:

function open()
{
    var file=document.getElementById('chosen');
    var fileURL = window.URL.createObjectURL(file);
    player.src=fileURL;
    player.load();
}

The videoplayer looks like this:

<video id=player>
<source src="big-buck-bunny_trailer.webm" type="video/webm" />
<source src="trailer_480p.mov" type"video/mp4" />
</video>

and of course I have connected the variable "player" with my videoplayer. The player.load()-thing works properly, so the function gets called correctly.

Now my question: What's wrong or missing in the Javascript-Part? The project doesn't work as explained.

Maybe you can help me. Thanks ;)

• javascript
• html
• video
• filechooser

• Are you checking in FF or some other browser? – Salman Arshad Commented Apr 20, 2012 at 11:38
• I'm sorry, I was in a hurry. So the question is how the JavaScript can manipulate the source-tag of the video. Video and HTML-File are in the same folder, locally. I'm checking in IE9 and FF – Schneeschipp Commented Apr 20, 2012 at 11:43

2 Answers 2

I'm not sure what you're asking, but there are some issues in your script.

function openPlayer(){ // open() is a native function, don't override
  var vplayer=document.getElementById('player'); // A reference to the video-element
  var file=document.getElementById('chosen').files[0]; // 1st member in files-collection
  var fileURL = window.URL.createObjectURL(file);
  vplayer.src=fileURL;
  vplayer.load();
  return; // A good manner to end up a function
}

And don't forget to change function's name in onclick().

More info about <video>: https://developer.mozilla/en/HTML/Element/video

Especially for scripting: https://developer.mozilla/en/DOM/HTMLMediaElement

I am not sure if the absence of codec is causing a problem here, you video source url should look something like this:

<source src="big-buck-bunny_trailer.webm" type='video/webm; codecs="vp8, vorbis"' />