如何用纯JavaScript动态获取切换的current_video类元素？

问题根源 #

你获取视频元素的代码只在页面初始化时执行了一次，后续轮播切换current_video类时，没有重新执行获取和操作视频的逻辑，所以控制台始终输出初始的第一个视频。另外，querySelectorAll返回的是NodeList集合，直接给集合设置autoplay和调用load()是无效的，必须操作单个DOM元素。

解决方案 #

把视频控制逻辑移到currentSlide函数内部，每次切换轮播时，重新获取当前激活的视频，并处理播放状态：

var slide = 0,
    slides = document.querySelectorAll('.cover-background > .video_container'),
    numSlides = slides.length;

//Functions!!
currentSlide = function() {
  var itemToShow = Math.abs(slide % numSlides);
  // 移除所有current_video类，并暂停所有视频
  [].forEach.call(slides, function(el) {
    el.classList.remove('current_video');
    const video = el.querySelector('.video');
    if (video) {
      video.pause(); // 暂停非当前视频
    }
  });
  // 给当前slide添加类，并处理视频播放
  const currentSlideEl = slides[itemToShow];
  currentSlideEl.classList.add('current_video');
  const currentVideo = currentSlideEl.querySelector('.video');
  if (currentVideo) {
    currentVideo.autoplay = true;
    currentVideo.load();
    currentVideo.play(); // 确保视频播放
  }
  resetProgress();
  resetInterval();
},         
next = function() {
  slide++;
  currentSlide();
},
prev = function() {
  slide--;
  currentSlide();
},
resetProgress = function() {
  var elm = document.querySelector('.progressbar'),
      newone = elm.cloneNode(true),
      x = elm.parentNode.replaceChild(newone, elm);
},
resetslide = function() {
  var elm = document.querySelector('#slides > li'),
      newone = elm.cloneNode(true),
      x = elm.parentNode.replaceChild(newone, elm);
},
resetInterval = function() {
  clearInterval(autonext);
  autonext = setInterval(function() {
    slide++;
    currentSlide();
  }, 10000);
},
autonext = setInterval(function() {
  next();
}, 10000);

关键改动说明 #

• 在遍历移除current_video类时，同时暂停每个slide里的视频，避免多个视频同时播放
• 给当前slide添加类后，直接从当前slide元素内部获取视频，不需要再用全局选择器
• 对单个视频元素执行load()和play()操作，确保切换后视频正常播放
• 移除了页面初始化时的全局视频操作代码，因为这部分逻辑已经整合到currentSlide中，初始化时currentSlide会自动执行一次

内容的提问来源于stack exchange，提问作者Noufal Binu