ScrollMagic 循环 - 场景持续时间与作为场景一部分的视频持续时间相同

问题描述

我有一个带有滚动播放视频的场景循环（循环，因为它与 wordpress ACF 灵活字段集成）。为此，我正在使用 ScrollMagic（和 GSAP，但在此处不适用）。

我想要做的是使整个场景的持续时间与场景视频的持续时间相同（在前端会有不同视频的演示）。我只是简单地尝试了 video.duration，但它以一种奇怪的方式运行：有时有效，有时无效。有解决方案吗？ 这是我的代码：

const startVideoFullScreenOnScrollFunction = () => {

const startVideoFullScreenOnScroll = document.querySelectorAll('.video-fullscreen-text-on-scroll');

for (let i = 0; i < startVideoFullScreenOnScroll.length; i += 1) {
  if (typeof (startVideoFullScreenOnScroll[i]) !== 'undefined' && startVideoFullScreenOnScroll[i] != null) {

    const controllerVideoFullScreenOnScroll = new ScrollMagic.Controller();

    const videoFullScreen = startVideoFullScreenOnScroll[i].querySelector('video');
    const textsOnVideo = startVideoFullScreenOnScroll[i].querySelectorAll('.video-fullscreen-text-on-scroll__copy');

    const timelineVideoFullScreenOnScroll = new TimelineMax();

    // fade in & fade out text
    for (let j = 0; j < textsOnVideo.length; j += 1) {
      timelineVideoFullScreenOnScroll
        .to(textsOnVideo[j],{
          opacity: 1,duration: 3,})
        .to(textsOnVideo[j],{
          opacity: 0,});
    }

    // ScrollMagic scene
    let sceneVideoFullScreenOnScroll = new ScrollMagic.Scene({
        duration: ???,triggerElement: startVideoFullScreenOnScroll[i],triggerHook: 0
      })
      .setTween(timelineVideoFullScreenOnScroll)
      .setPin(startVideoFullScreenOnScroll[i])
      .addTo(controllerVideoFullScreenOnScroll);

    let scrollpos = 0;
    let startpos = 0;

    sceneVideoFullScreenOnScroll.on('update',e => {

      startpos = e.startPos / 1000;
      scrollpos = e.scrollPos / 1000;

      if (scrollpos >= startpos) {
        videoFullScreen.currentTime = scrollpos - startpos;
      };
    });
  }
}

}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）