如何在点击时更改 html5 视频源？

Question

我想做的是创建一种播放列表，只使用 html5 和香草 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-tests 失败了，所以它只是重新加载了相同的视频，但即使在删除测试并将 filename 设置为 "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);

似乎有帮助。现在单击箭头时，视频会更改，但不会更改为正确的。按向右箭头总是显示视频 1，而按向左箭头总是显示视频 3。这些是每个方法最后一个 else 语句中的视频，所以我的 if 测试似乎仍然存在问题。

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

source.src == ...

到

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

在我的 if 测试中。 source.src 总是返回完整的 url (http://..../img-vid/video1.mp4)，而不是相对的 (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()[ 来解决我的问题=16=] 并将 source.src 更改为 source.getAttribute("src").

如何在点击时更改 html5 视频源？

How to change html5 video source on click?

html

javascript

video

html5-video