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的元素数组

然后在返回的数组（这是一个带有类名videolink的链接元素）上运行一个循环，并在每个调用changeVideo函数的

上添加一个click事件 this内的{p> changeVideo指的是被点击的元素。因此，我们使用刚刚点击的链接元素上的data-videolink属性获取dataset值

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

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>

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

1 个答案: