Changing mediasource whith javascript

Question

I ran into a little problem right now and i can't find a solution.

HTML:

<video id="vid" controls >
<source src=".mp4" type="video/mp4">
<source src="HEYE.mp4" type="video/mp4">
</video>

JavaScript:

function ChangeVideo(){
 if(click%2 == 0){
    document.getElementById('vid').src="Troll.mp4";
    click++;
 }else{
    document.getElementById('vid').src="HEYE.mp4";
    click++;
 }
}

Button:

<button onclick="ChangeVideo()">Change video</button>

the problem is that i dont get it to change video when i click the button.

My to videos in my map is named "HEYE.mp4" and "Troll.mp4"

Answer 1

function ChangeVideo(){
    var vid = document.getElementById('vid');
    vid.src = click%2 ? "HEYE.mp4" : "Troll.mp4";
    vid.load();
    vid.play();
    click++;
}