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-tests失败，所以它只是重新加载了相同的视频，但即使在删除测试并将 filename 设置为＆＃34; video2＆＃34;之后没有做任何事。

编辑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-tests似乎仍然存在问题。

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

source.src == ...

到

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

在我的if-tests中。 source.src 始终返回完整的网址（http://..../img-vid/video1.mp4），而不是相对的网址（img-vid / video1.mp4），因此每个if-test都会失败。

Answer 1

正如我在编辑中所提到的，我设法通过将 button.onclick 更改为 button.addEventListener（）并更改 source.src来解决我的问题到 source.getAttribute（＆＃34; src＆＃34;）。

Answer 2

从观察代码中，我发现的一个错误是Dim comm As New SqlCommand comm.Connection = sqlconn comm.CommandText = "saving_task" comm.CommandType = CommandType.StoredProcedure comm.Parameters.Add("@task1", SqlDbType.NVarChar, 50) comm.Parameters.Add("@task2", SqlDbType.NVarChar, 50) comm.Parameters.Add("@task3", SqlDbType.NVarChar, 50) sqlconn.Open() Dim i As Integer For i = 0 To DGV1.Rows.Count - 1 If DGV1.Rows(i).Cells(0).Value = True Then comm.Parameters("@task1").Value = DGV1.Rows(i).Cells(1).Value comm.Parameters("@task2").Value = DGV1.Rows(i).Cells(2).Value comm.Parameters("@task3").Value = DGV1.Rows(i).Cells(3).Value comm.ExecuteNonQuery() End If Next sqlconn.Close()超出了范围。

将其更改为：

var filename

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

2 个答案: