Geek asks and answers

Select a local video and play it in an HTML5 video player (all local, same folder)

for school I need to use an HTML5 video player with additional controls and the ability to select a file from a local drive. The page also works locally. Therefore, it does not load. Files (HTML and video) are located in one local folder.

For pick-ups, I use form c <form><input type="file" id="chosen" /><button type="submit" onclick="open();">Change</button></form>. Now here is my JavaScript, which should manipulate the source of the video player:

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

The video player is as follows:

<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 connected the "player" variable to my video player. Function player.load () - works correctly, so the function gets the correct form.

Now my question is: what is wrong or not in the Javascript-Part? The project does not work as described.

, . ;)

+3
2

, , 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
}

onclick().

<video>: https://developer.mozilla.org/en/HTML/Element/video

: https://developer.mozilla.org/en/DOM/HTMLMediaElement

+3

, , URL- :

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

More articles:


All Articles