filmstrip

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'));
});

filmstrip.resize(120, 800);

//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);
});