https://github.com/useallfive/scrub.js
https://github.com/useallfive/scrub.js
Last synced: 12 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/useallfive/scrub.js
- Owner: UseAllFive
- License: mit
- Created: 2014-07-28T20:12:00.000Z (almost 12 years ago)
- Default Branch: master
- Last Pushed: 2015-03-27T18:41:53.000Z (about 11 years ago)
- Last Synced: 2025-03-27T20:43:16.111Z (about 1 year ago)
- Language: JavaScript
- Size: 230 KB
- Stars: 3
- Watchers: 24
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
scrub.js 
==================
Map scroll progress to a video timeline. As seen on http://useallfive.com/process/.
## Examples
[Video mapped to document scroll](https://useallfive.github.io/scrub.js/document-example.html)
[Video mapped to div scroll](https://useallfive.github.io/scrub.js/inside-div-example.html)
# Usage
## Options
* **`preload`**: Download the entire video file into browser memory, and use its object URL as the video source. Yields best scrubbing performance.
* default: `true`
* **`container`**: The viewable 'window' of the scrollable content.
* default: `$(window)`
* **`contentBody`**: The scrollable content body within `container`.
* default: `$(document)`
* **`urls`**: Array of video asset URLs.
* default: `[]`
## Setup
### Include plugin after jQuery.
```html
```
### Add video element. (Minimum markup)
```html
```
# Code samples
### Map video `currentTime` to document scroll progress (default)
[Working example](https://useallfive.github.io/scrub.js/document-example.html)
Javascript
```javascript
var $video = $('#background');
$video.scrub({
urls: [
'aboutBg.mov',
'aboutBg.ogv'
]
});
```
### Map video `currentTime` to an element's scroll progress.
[Working example](https://useallfive.github.io/scrub.js/inside-div-example.html)
Example scrollable div markup
```html
#container {
overflow: scroll;
}
```
Javascript
```javascript
var $video = $('#background');
$video.scrub({
container: '#container',
contentBody: '#content',
urls: [
'aboutBg.mov',
'aboutBg.ogv'
]
});
```
### Video ready event
The jQuery selector on which the plugin was called will trigger a `loaded` event once scrubbing functionality has been bound. Be sure to bind to the `loaded` event before calling `scrub()` to ensure that the loaded event doesn't fire before the custom event is bound.
```javascript
// Assume #loading is some div containing a loading indicator
var $loading = $('#loading');
var $video = $('#video');
// Bind to the `loaded` event before calling scrub to ensure that the
// loaded event doesn't fire before the custom event is bound.
$video.on('loaded', function() {
$loading.hide();
$video.show();
});
// ...
$video.scrub({ // ...
```