javascript - 将视频源更改为其他视频的多个链接？

Question

我正在尝试创建多个链接，单击这些链接会更改播放器上正在播放的视频的来源。

到目前为止，我几乎完成了我想要实现的目标:

HTML:

<video id="videoclip" width="640" height="480" controls preload="none">
<source id="mp4video" src="myvideo.mp4?dl=1">
</video>

<p><a href="#videoclip" id="videolink1">first video</a></p>
<p><a href="#videoclip" id="videolink2">second video</a></p>
<p><a href="#videoclip" id="videolink3">third video</a></p>
<p><a href="#videoclip" id="videolink4">fourth video</a></p>

Javascript:

videocontainer = document.getElementById('videoclip');
videosource = document.getElementById('mp4video');
newmp4 = 'newvideo.mp4?dl=1';

videobutton = document.getElementById("videolink1");

videobutton.addEventListener("click", function(event) {
    videocontainer.pause();
    videosource.setAttribute('src', newmp4);
    videocontainer.load();
    videocontainer.play();
}, false);

这很好用。问题是，代码的编写方式只允许我将第一个视频更改为第二个视频，仅此而已。我希望能够单击其他链接(videolink2、videolink3 等)并将正在播放的视频更改为其他内容。

我已经花了很多时间在这里查看许多其他问题，但未能实现我的目标。

Answer 1

在这种情况下，您需要动态思考。您为使一个人工作所做的工作是很好的第一步。

每个视频链接现在都有一个 data- 属性，用于保存该链接的新来源。

每个视频链接也有相同的 class，这样我们就可以使用 document.getElementsByClassName("videolink") 将它们分组在一起，它返回具有类名的元素数组视频链接

然后在返回的数组(这是一个带有类名 videolink 的链接元素)上运行一个循环，并在每个调用 changeVideo 函数的元素上添加一个点击事件

changeVideo 中的

this 指的是被点击的元素。因此，我们使用刚刚单击的链接元素上的 dataset 属性获取 data-videolink 值

最后将视频的来源更改为该值。

var videocontainer = document.getElementById('videoclip');
var videosource = document.getElementById('mp4video');
var videoButtons = document.getElementsByClassName("videolink");

for (var i = 0; i < videoButtons.length; i++) {
  videoButtons[i].addEventListener("click", changeVideo, false);

}

function changeVideo() {
  var newLink = this.dataset.videolink;
  console.log("Changing video to source: " + newLink);
  //videocontainer.pause();
  //videosource.setAttribute('src', newLink);
  //videocontainer.load();
  //videocontainer.play();
}

<video id="videoclip" width="640" height="480" controls preload="none">
<source id="mp4video" src="myvideo.mp4?dl=1">
</video>

<p><a href="#videoclip" data-videolink="newvideo.mp4?dl=1" class="videolink">first video</a></p>
<p><a href="#videoclip" data-videolink="newvideo2.mp4?dl=1" class="videolink">second video</a></p>
<p><a href="#videoclip" data-videolink="newvideo3.mp4?dl=1" class="videolink">third video</a></p>
<p><a href="#videoclip" data-videolink="newvideo4.mp4?dl=1" class="videolink">fourth video</a></p>