Skip to content
html5 video preview
JavaScript
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.