Question

我正在为将要上传视频的客户构建CMS网站。我正在尝试为每个视频构建一个自定义进度条，我之前已经完成了此操作，但只有一个视频存在，所以我可以使用getElementByID来调用每个视频，但是因为它会有多个每页视频我试着调用一个each函数，并在它的父容器中找到每个元素的类。

您可以在此处查看我的codepen：https://codepen.io/neal_fletcher/pen/JJzbYP

正如你所看到的那样，当视频播放时，进度条没有移动（应该如此），这里只有一个视频，但会有多个视频，所以我不能使用依赖于每个元素的ID的功能。

我的jQuery标记也在下面：

window.onload = function() {
  $(".video-wrap").each(function() {
    var slideshowVideo = document.getElementsByClassName("homepage-video");

    var slideshowSeek = document.getElementsByClassName("seek-bar");

    slideshowSeek.addEventListener("change", function() {
      // Calculate the new time
      var time = slideshowVideo.duration * (slideshowSeek.value / 100);

      // Update the video time
      slideshowVideo.currentTime = time;
    });
  });

对此最佳解决方案的任何建议都将不胜感激！

Answer 1

工作代码

  window.onload = function() { 
  $(".video-wrap").each(function() {
    var slideshowVideo = document.getElementsByClassName("homepage-video");

    var slideshowSeek = document.getElementsByClassName("seek-bar");

    slideshowSeek[0].addEventListener("change", function() {
      // Calculate the new time

      var time = slideshowVideo.video.duration * (slideshowSeek[0].value / 100);

      // Update the video time
      slideshowVideo.video.currentTime = time;
    });

 slideshowVideo.video.addEventListener('timeupdate', function(video){
    slideshowSeek[0].value = slideshowVideo.video.currentTime * 100 / slideshowVideo.video.duration;
 }, false);

  });

}

检查下面的笔 https://codepen.io/anon/pen/qjvRXP?editors=0110

jQuery每个函数和getElementsByClassName

1 个答案: