Fork me on GitHub

Posts in tag `opcode'

Filmstrip - html5 video preview

November 3, 2013

En OpCode estamos haciendo Filmstrip, un widget para previsualizar videos en html5. Para mejor performance se utilizan videos convertidos a 320x180px, a 1 frame/s y sin audio. Esto se logra con ffmpeg:

ffmpeg -i original_video.mkv -s 320x180 \
       -vcodec libx264 -an -r 1 filmstrip_video.mp4

El siguiente video deja ver el funcionamiento principal de filmstrip: mostrar frames de un video para tener una panomámica del mismo.

El ejemplo del video podés probarlo online acá.

En este otro puede verse otra de las funciones de filmstrip: capturar un frame a un segundo determinado y devolver una imagen al tamaño real del video.

Aquí puede verse un ejemplo básico de uso

#html
<canvas id="filmstrip"></canvas>

#script
var model = {src: 'sita.ogv'};

var fs = new Filmstrip(model, {
    width: 120,
    height: 600,
    bgColor: '#333',
    drawBackground: true,
    drawHoles: true,
    holesColor: '#222',
    holesDispersion: .7,
    bandsPadding: 20,
    autoOrientation: true,
    strechOnResize: true,
});

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

Este proyecto es parte del proyecto Malbec Broadcast desarrollado por la Cooperativa OpCode y como todos sus proyectos tiene licencia AGPL v3.

El código en github: https://github.com/inaes-tic/filmstrip

Javascript Software Libre Trabajos Video html5 opcode

← Older | Newer →