Video Scrubbing - what are the best practices to avoid bad performance on slower connections

[Nicola Peluchetti]

Hi,

 

we've implemnted video scrubbing using gsap. The code is live at https://navee.com/ 

I'll post the relevant code here:

Video conversion:

  // ffmpeg -i ~/Downloads/Toshiba\ video/original.mov -movflags faststart
  // -vcodec libx264 -crf 23 -g 1 -pix_fmt yuv420p output.mp4 ffmpeg -i
  // ~/Downloads/Toshiba\ video/original.mov -vf scale=960:-1 -movflags
  // faststart -vcodec libx264 -crf 20 -g 1 -pix_fmt yuv420p output_960.mp4

The html:

              <video
                id="video1"
                class="video-scrub"
                src="video/output_960.mp4"
                playsinline="true"
                webkit-playsinline="true"
                preload="metadata"
                muted="muted"
              ></video>

The javascript

  gsap.utils.toArray(".video-scrub").forEach((video) =>
    videoScrub(video, {
      scrollTrigger: {
        trigger: video,
        start: "center center",
        end: "+=6500",
        scrub: true,
        pin: true,
        onEnterBack: () => {
          $(".page-header").fadeOut("fast");
        },
      },
      onComplete: () => {
        $(".page-header").fadeIn("fast");
      },
      onStart: () => {
        $(".page-header").fadeOut("fast");
      },
      onReverseComplete: () => {
        $(".page-header").fadeIn("fast");
      },
      // x: document.documentElement.clientWidth * 0.05,
    })
  );

  function videoScrub(video, vars) {
    video = gsap.utils.toArray(video)[0]; // in case selector text is fed in.
    let once = (el, event, fn) => {
        let onceFn = function () {
          el.removeEventListener(event, onceFn);
          fn.apply(this, arguments);
        };
        el.addEventListener(event, onceFn);
        return onceFn;
      },
      prepFunc = () => {
        video.play();
        video.pause();
      },
      prep = () => once(document.documentElement, "touchstart", prepFunc),
      src = video.currentSrc || video.src,
      tween = gsap.fromTo(
        video,
        { currentTime: 0 },
        {
          paused: true,
          immediateRender: false,
          currentTime: video.duration || 1,
          ease: "none",
          ...vars,
        }
      ),
      resetTime = () =>
        (tween.vars.currentTime = video.duration || 1) && tween.invalidate();
    prep();
    video.readyState ? resetTime() : once(video, "loadedmetadata", resetTime);
    return tween;
  }

code was found it on the forum. The question is,as per in the title, how to improve performance on slower connections. We know that the filesize is big and it's a major offenders, should we turn down frame per seconds on mobile to make the video smaller?different codec?I am looking for general advice here, rather than for a full solution. 

Thanks in advance

[GreenSock]

Yeah, if you want it to load faster on slow connections, that's going to be all about the video file (those are big). You can reduce the quality (bitrate) in the compression, and/or reduce the dimensions of the raw video. Those are the main things that contribute to file size. Keyframe placement is a factor too, but if you want to be able to scrub smoothly, you must have very frequent keyframes. 

 

We really try to keep these forums focused on GSAP-specific questions (see the forum guidelines) but hopefully this at least helps a little bit and gets you moving in a better direction. Good luck!

[Nicola Peluchetti]

Ok thanks a lot for the quick answer, it helps confirming what the root cause of the issue is. Will experiment.