Jump to content
Search Community

Nicola Peluchetti

Members
  • Posts

    2
  • Joined

  • Last visited

Nicola Peluchetti's Achievements

  1. Ok thanks a lot for the quick answer, it helps confirming what the root cause of the issue is. Will experiment.
  2. 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
×
×
  • Create New...