Video scrubbing based on scroll with easing effect
Switch branches/tags
Clone or download
Latest commit 0f7b996 Jun 27, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist code style update Jun 26, 2017
src code style update Jun 26, 2017
test added example of two instances Jun 26, 2017
.gitignore no message Feb 27, 2015
README.md finish 1.1 Mar 2, 2015
gulpfile.js finish 1.1 Mar 2, 2015
package.json bugfix Mar 2, 2015
yarn.lock code style update Jun 26, 2017

README.md

VideoScroller.js

Video scrubbing on scroll with easing using no dependencies.

Demo

http://finnursig.github.io/VideoScroller

Installation

npm install video-scroller

Usage

HTML

Normal use:

<video src="video.mp4">

Using XHR to blob for performance

<video data-src="video.mp4">

Javascript

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