Fork me on GitHub

Posts in tag `html5'

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

Aprendiendo CoffeeScript y Canvas

January 22, 2013

Hacía tiempo que tenía ganas de meterme con canvas pero no encontraba la motivación hasta que apareció este libro que propone hacer un juego completo usando CoffeeScript. Así que me pareció copado aprender las dos cosas juntas.

Empecé a leer el libro y está bueno. Es claro y tiene ejemplos interesantes. Todavía no llegué a la parte del juego pero ya pasé por los fundamentos de canvas y CoffeeScript. También hice un curso de CoffeeScript en CodeSchool gracias a que me registré y me dieron un pase libre por dos días.

Por otro lado estuve leyendo de canvas y de lo que permite hacer en forma nativa. Acá dejo algo que hice usando una técnica que leí por ahí en la cual superponés varios canvas usando z-index y simulás tener layers sin necesidad de ningún framework ya que canvas no lo permite en forma nativa.

En el ejemplo de la pelota se usan dos canvas: en uno se carga la imagen de fondo y en otro donde se hace mover la pelota. El de la imagen podría haber sido un simple img, pero bueno, de paso veo cómo se carga una imagen en un canvas. Está hecho con CoffeeScript y compila en el navegador así que podés ver cómo está hecho mirando el código del html.

html5

← Older | Newer →