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

【问题标题】：How to change html5 video source on click?如何在点击时更改 html5 视频源？
【发布时间】：2016-09-26 17:44:08
【问题描述】：

我要做的是创建一种播放列表，只使用 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-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);

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

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

source.src == ...

到

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

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

【问题讨论】：

标签： javascript html video html5-video

【解决方案1】：

正如我所做的编辑中提到的，我设法通过将 button.onclick 更改为 button.addEventListener() 并更改 source.src 来解决我的问题 到 source.getAttribute("src").

【讨论】：

【解决方案2】：

通过观察代码，我发现一个错误是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();
}

【讨论】：