How to change html5 video source on click?

Question

What I'm trying to do is create a sort of playlist, using just html5 and vanilla javascript (no jquery). The same short video keeps looping until you click one of the arrows, then the next (or previous) video in line gets loaded in the same video element.

Here's what I have:

HTML

<video autoplay="true" loop="true" id="video">
    <source src="img-vid/video1.mp4" type="video/mp4" id="vid-src">
</video>
<img src="img-vid/Arrow_left.png" class="arrow arrow-left" id="left">
<img src="img-vid/Arrow_right.png" class="arrow arrow-right" id="right">

Javascript

var button_next = document.getElementById("right");
var button_previous = document.getElementById("left");
var playlist = document.getElementById("video");
var source = document.getElementById("vid-src");

button_next.onclick = play_next;
button_previous.onclick = play_prev;

function play_next() {
    var filename = '';
    if (source.src == "img-vid/video1.mp4"){
        filename = "video2";
    }
    else if (source.src == "img-vid/video2.mp4"){
        filename = "video3";
    }
    else if (source.src == "img-vid/video3.mp4"){
        filename = "video4";
    }
    else {
        filename = "video1";
    }
    source.src = "img-vid/" + filename + ".mp4";
    playlist.load();
    playlist.play();
}

//same for function play_prev(), but order of videos is reversed

However, with this code, clicking either arrow doesn't seem to do anything. I'm not sure what I'm doing wrong though. My first thought was that the if-tests were failing, so it just re-loaded the same video, but even after removing the tests and setting filename to be "video2", it didn't do anything.

Edit 1: Changed scope on var filename, like Dev-One suggested. Video source still doesn't change though.

Edit 2: changing the following:

button_next.onclick = play_next;
button_previous.onclick = play_prev;

to

button_next.addEventListener("click", play_next);
button_previous.addEventListener("click", play_prev);

seems to help. When clicking on the arrows now, the video changes, but not to the correct one. Pressing the arrow-right always brings up video1, while pressing arrow-left always shows video3. These are the videos in the last else-statement for each method, so there still seems to be an issue with my if-tests.

Edit 3: Everything is now working as planned! I also had to change

source.src == ...

to

source.getAttribute("src") == ...

in my if-tests. source.src always returned the full url ( http://..../img-vid/video1.mp4 ), not the relative one (img-vid/video1.mp4), so every if-test failed.

Answer 1

如我所做的编辑所述，我设法通过将button.onclick更改为button.addEventListener（）并将source.src更改为source.getAttribute（“ src”）来解决了我的问题。

Answer 2

From observing the code, one mistake i can find is var filename is used out of scope.

Change it to:

function play_next() {

    var filename = '';

    if (source.src == "img-vid/video1.mp4"){
        filename = "video2";
    }
    else if (source.src == "img-vid/video2.mp4"){
        filename = "video3";
    }
    else if (source.src == "img-vid/video3.mp4"){
        filename = "video4";
    }
    else {
        filename = "video1";
    }
    source.src = "img-vid/" + filename + ".mp4";
    playlist.load();
    playlist.play();
}