Choose local video and play it in HTML5 videoplayer (all local, same folder)

filechooser, html, javascript, video

Solution

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.org/en/HTML/Element/video

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

Problem

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 ;)

Original source