ScrollyVideo.js: Scroll-Driven Video with Smart Fallbacks Across Frameworks

ScrollyVideo.js enables responsive, scroll-controlled videos across Web, React, Svelte, Vue, and Astro with minimal setup. It offers configurable behavior and a programmatic API, and uses WebCodecs when possible, falling back to HTML5 playbackRate and currentTime techniques. For maximum reliability, keyframe=1 encoding is recommended, and iOS battery saver mode is unsupported.

Key Points

• Cross-framework scroll-controlled video component with simple setup for Web, React, Svelte, Vue, and Astro.
• Supports auto scroll-tracking or external control via setVideoPercentage, plus configurable layout and playback options.
• Three-tier playback strategy: WebCodecs+canvas (best, Chrome-only), HTML5 playbackRate (forward-only), and currentTime seeks (works both directions but ideally needs keyframe=1).
• Graceful fallbacks ensure broad browser support; recommends keyframe=1 encoding for optimal reliability.
• Known issue: iOS battery saver mode disables functionality with no workaround.