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.

Venser Venser · Accepted Answer · 2016-05-28T14:56:03

As mentioned in the edits I made, I managed to solve my problem by changing button.onclick to button.addEventListener() and changing source.src to source.getAttribute("src").

How to change html5 video source on click?

2 Answers