Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
html5 video preview
JavaScript
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
example
.gitignore
LICENSE
Readme.md
filmstrip.js
package.json

Readme.md

Filmstrip.js: an HTML5 video preview widget that will rock your world

This project is part of the Malbec Broadcast project that is moved and weaved by the OpCoode Cooperative http://opcode.coop

This project like all the Malbec Broadcast projects is released under the AGPL v3 Licence.

Show the video: http://www.youtube.com/watch?v=iOzS8xtnsQo

Play with the demo http://www.opcode.coop/filmstrip/

Usage

<canvas id="filmstrip"></canvas>
filmstrip = new Filmstrip(model, {
    width: 120,
    height: 600,
    bgColor: '#333',
    drawHoles: true,
    holesColor: '#222',
    holesDispersion: .7,
    bandsPadding: 20,
    autoOrientation: true,
    strechOnResize: true,
});

filmstrip.load();

filmstrip.on('draw:finished', function() {
    this.drawCanvas($('#filmstrip'));
});

Resize

filmstrip.resize(120, 800);

Events

//video metadata loaded
filmstrip.on('loaded', function() {
});

//resize started
filmstrip.on('draw:started', function() {
});

//resize finished
filmstrip.on('draw:finished', function() {
    //draw all canvas
    this.drawCanvas($('#filmstrip'));
});

//frame drawn
filmstrip.on('draw:frame', function(event, args) {
    //draw canvas frame by frame
    this.drawFrame($('#filmstrip'), args);
});

Dependencies

  • jQuery

Run Example

cd example
npm install # install package.json
node server.js
Something went wrong with that request. Please try again.