Scrubbs html5 video based on scroll position with easing
npm install video-scroller
npm install video-scroller
`
Usage
$3
Normal use:
`
`
Using XHR to blob for performance
`
`
$3
`
new VideoScroller({
el: document.getElementById('myVideoElement')
});
`
Options
| Property | Type | Text | Default |
|----------|------|------|---------|
| el | element | video element
| invert | bool | reverses playback directions / scroll direction | false
| scrollTimeout | number | how often new position is calculated when scrolling in milliseconds | 300
| easingFunction | string / function | custom easing function, using only one parameter [0-1] and returning [0-1] | easeOutQuint
Easing functions
See [EasingFunctions.js] (https://github.com/finnursig/VideoScroller/blob/master/src/EasingFunctions.js)
Video requirements
To get the video to scroll smoothly it has to have a generous number of keyframes, here is how you would do that using ffmpeg
ffmpeg -i input.mp4 -g 10 output.mp4`