如何点击更改html5视频源？

Question

我要做的是创建一种播放列表，只使用html5和vanilla javascript（不使用jquery）。相同的短视频一直循环直到你点击其中一个箭头，然后一行中的下一个（或上一个）视频被加载到相同的视频元素中。

以下是我的资料：

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

但是，使用这段代码，单击任何一个箭头似乎都没有任何作用。但我不确定我做错了什么。我首先想到的是if测试失败了，所以它只是重新加载了相同的视频，但即使在删除了测试并将文件名设置为“videO2”之后，它也没有做任何事情。

编辑1：改变了var文件名的作用域，像Dev-One建议的那样。视频来源仍然没有改变，但。

编辑2：更改以下内容：

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

至

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

似乎有帮助。现在点击箭头时，视频会发生变化，但不是正确的。按下箭头-向右总是显示video1，而按箭头-向左总是显示Video3。这些是每个方法的最后一个else语句中的视频，所以我的if测试似乎仍然存在一个问题。

编辑3：现在一切都在按计划工作！我也不得不改变

source.src == ...

至

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

在我的IF测试中。source.src总是返回完整的url(http://.../img-vid/video1.mp4)，而不是相对的url(img-vid/video1.mp4)，因此每个if测试都失败。

Answer 1

通过观察代码，我可以发现一个错误是var filename的使用超出了范围。

将其更改为：

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();
}

Answer 2

正如我所做的编辑中提到的，我通过将button.onclick更改为button.addeVentListener()，并将source.src更改为source.getAttribute（“src”）来解决我的问题。