Make a HTML5 video player play a different file

Question

While a video is playing I can't get the HTML5 player to play a different video, I tried changing the source.src but then it doesn't change the actual video to playing a different file. How do I get the video to actually go to the next video?

This is the part of the code that's not working:

Javascript:

function change(s){
    srs=document.getElementById('source');
    srs.src="";
    srs.src=s;
    video.pause();
    video.currentTime=0;
    video.play();
}

HTML:

<video id='video'>
    <source id='source' src="file:///C:/Users/Ruurd/Music/Far%20East%20Movement%20-%20Turn%20Up%20The%20Love%20ft.%20Cover%20Drive.mp3" >
</video>

PS: This doesn't actually have to work online, i just want to make a video/audio player for myself

Answer 1

After you set the src property, call video.load() .

Actually, if you're only going to have one single source (presumably, because you know you're going to be using a browser that will play mp3), then you can just simplify and set the src property on the video tag itself.

HTML:

<video id="video" src="file:///C:/Users/Ruurd/Music/Far%20East%20Movement%20-%20Turn%20Up%20The%20Love%20ft.%20Cover%20Drive.mp3"></video>

Javascript:

var video = document.getElementById('video');
function change(s){
    video.pause();
    video.src = s;
    video.load();
    video.currentTime = 0;
    video.play();
}