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