VideoScroller.js

Video scrubbing on scroll with easing using no dependencies.

Demo

http://finnursig.github.io/VideoScroller

Installation

``
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`

Changes

* 1.1.0
* Added XHR to blog option to get rid of "206 Partal Content" requests.
* Easingfunction option can now be a string.
* 1.0.3
* Changed code from ES5 to ES6 using babel.
* 1.0.2
* 1.0.1
* 1.0.0