JavaScript再次开始视频

Question

我有通过滚动鼠标轮滚动的视频。一切都很好，但是我想检查视频是否完成并跳回开始。

我已经尝试了一个IF语句将所有变量设置为0，但它不起作用。 到目前为止，这是我的代码，与不工作的IF语句：

const action = document.querySelector(".action");
const video = action.querySelector("video");

//Scroll Magic scenes
const controller = new ScrollMagic.Controller();
let scene = new ScrollMagic.Scene({
  duration: 200000, //64000
  triggerElement: action,
  triggerHook: 0
})
//  .addIndicators()
  .setPin(action)
  .addTo(controller);

//Scroll Magic video animation
let accelAmount = 0.1;
let scrollpos = 0;
let currentTime = video.currentTime;
let lastcurrentTime;
let delay = 0;

scene.on("update", e => {
  scrollpos = e.scrollPos / 3000; //the higher the number, the slower
  });

//Move
  setInterval(() => {
    delay += (scrollpos - delay) * accelAmount;
    video.currentTime = delay;
    console.log(video.currentTime + " reading");
    lastcurrentTime = video.currentTime;
  }, 33.3);

//function to check if is still scrolling
function scrollTracker(delay, callback) {
  let timeout = null;

  return function(...args) {
    if (timeout !== null) {
      clearTimeout(timeout);
      timeout = null;
    }

    timeout = setTimeout(callback, delay, ...args)
  };
}

//check if is still scrolling after x seconds
const tracker = scrollTracker(5000, () => {
  console.log('User stopped scrolling.');
  window.scrollTo(0, 0);
});

window.addEventListener('scroll', tracker);

//scroll back to beginning when movie has finished -- not working
if (video.currentTime >= 100.0){
  window.scrollTo(0, 0);
  scrollpos = 0;
  currentTime = 0;
  delay = 0;
}

感谢您的任何帮助！

PS是否可以通过使用“ window.scrollto”来回到视频的开头？

Video.CurrentTime = 0;在这里不工作。

Answer 1

将循环属性添加到视频元素，它将自动为我们循环。如果不起作用，则仅在代码运行时才检查一次。您需要 end 事件侦听器才能检查。