scrolly-video

A component for scroll-based (or other externally controlled) video playback. It enables creating interactive video experiences that respond to user scrolling or other external controls.

Key Features:

• Scroll-controlled video playback
• Supports multiple rendering methods for cross-browser compatibility
• Customizable playback behavior through various parameters
• Framework support including Svelte, React, Vue, and Astro

Framework Support:

• Svelte: Component available via ScrollyVideo.svelte
• Also supports React, Vue, Astro, and plain JavaScript implementations

Core Functionality:

• Three different rendering methods for optimal performance:
  1. WebCodecs + Canvas (most performant, Chrome only)
  2. HTML5 Video with playbackRate adjustment
  3. HTML5 Video with currentTime manipulation (fallback)

Target Audience:

• Developers creating scroll-based interactive experiences
• Those needing performant scroll-controlled video across browsers
• Users of modern JavaScript frameworks (especially Svelte, React, Vue)

Notable Limitations:

• iOS battery saver mode prevents functionality
• WebCodecs method currently Chrome-only
• Requires careful video encoding for optimal performance

Created by Daniel Kao