I am creating a website that essentially plays through a 1 min 30 sec video as you scroll, and I have it functioning. I have the video preloading, but at 1920x1080, the whole video is almost 200mb and it makes for a laggy scroll. When I change the video to 960x540, it is only 70mb and unless you scroll super fast, it works pretty well. Worst case I plan to just shorten the video until the file is small enough, but I want a large scroll.

Does anyone know how to implement the scroll being low quality, but when you stop scrolling it switches to a high quality frame?

enterView({
            selector: 'section',
            enter: function(el) {
                el.classList.add('entered');
            }
        })
    
        var frameNumber = 0, // start video at frame 0
        // lower numbers = faster playback
        playbackConst = 1000, 
        // get page height from video duration
        setHeight = document.getElementById("set-height"), 
        // select video element         
        vid = document.getElementById('v0'); 
        // var vid = $('#v0')[0]; // jquery option

    // dynamically set the page height according to video length
    vid.addEventListener('loadedmetadata', function() {
    setHeight.style.height = Math.floor(vid.duration) * playbackConst   "px";
    });

    // Use requestAnimationFrame for smooth playback
    function scrollPlay(){  
    var frameNumber  = window.pageYOffset/playbackConst;
    vid.currentTime  = frameNumber;
    window.requestAnimationFrame(scrollPlay);
    }

    window.requestAnimationFrame(scrollPlay);

    

Or another creative work around? I can post my code, but I don't know how much it will help

CodePudding user response：