Taller: Posibilidades del Open Video y el HTML5, día 2

por comcinco

Otro día de este interesante taller sobre HTML5 y open video. De nuevo comenzamos con una presentación realizada, como la primera, enteramente usando HTML. En esta ocasión vamos a ver los diferentes entornos de desarrollo o frameworks que hay disponibles para trabajar más cómodamente con HTML5.

La primera es una conocida de ZEMOS98, Popcorn.js, es conocida porque el proyecto «La Escucha» lo realizamos usando esta framework. Está desarrollado por Mozilla y su comunidad. Entre sus principales características tenemos que permite la sincronización entre diferentes fuentes mediante el uso de plugins. Fuentes que van desde Twitter, Wikipedia, Flickr y un largo etc. Tiene un editor en línea donde se pueden mezclar estas fuentes sin tener que instalar ningún programa llamado Popcorn Maker.

Toda la documentación está disponible en la web de Popcorn.js, así como la documentación de los plugins existentes y de su uso. A la hora de implementar en el código el uso de Popcorn.js hay que tener en cuenta que para usar los plugins hay que usar la versión completa del código JavaScript, llamado: popcorn-complete.min.js.

Otra framework es Universal Subtitles, y está más dirigida a la inclusión de subtítulos en diferentes idiomas y en diferentes plataformas de vídeo, no solo HTML5, también en Youtube o Vimeo. Escribí un artículo sobre su uso para subtitular vídeos de Youtube. Lo interesante de esta framework es que permite crear susbtítulos de forma colaborativa y así establecer grupos de traducción de subtítulos por ejemplo. Ofrece una forma facil de incrustar los vídeos con los subtítulos en la web.

El último es $media, desarrollado por A Navalla Suíza. Esta framework utiliza como base jQuery, que no es más que otro framework, aunque con $media se simplifica bastante el código, y eso que en palabras de Oscar Otero, $media está más enfocado a desarrolladores. Al igual que Popcorn.js, es capaz de manejar las propiedades de vídeo y de audio, de eventos y línea de tiempo. También puede extender su usabilidad mediante plugins, aunque hay pocos desarrollados, comparado con Popcorn.js, seguro que nos sorprenderán con más y más en los próximos meses. Este es un pequeño ejemplo de lo que puede hacer, y nos mostraron otros ejemplos como puede ser la conversión del vídeo a caracteres ASCII, a letras vamos. O la posibilidad de «simular» el efecto chroma key e incluso establecer el seguimiento de un color y aplicarle una capa a ese movimiento, un flipe. Como ellos mismos han dejado claro durante el taller, $media no es un producto final, es una herramienta para trabajar sobre ella, por lo que su desarrollo no tiene fin.

Una aclaración cuando se implementa en el código es que hay que cargar previamente las librerías jQuery para que $media pueda funcionar.

Grupo de diseño y programación web.

Grupo de grabación y edición del vídeo.

Después de terminar con la presentación, nos separamos en dos grupos, uno se dedicó a pensar, grabar, editar y crear los subtítulos en inglés, como resultado tuvieron cuatro mini entrevistas a cuatro personas del grupo, cada uno en su idioma nativo. El otro grupo, donde yo me encontraba, se dedicó a montar la estructura de la web, a crear los scripts para poner en funcionamiento $media. Cuando los dos grupos terminamos, se fusionó y dio como resultado esta demo de clase de la que estamos muy orgullosos. En esta demo se puede ver como los vídeos codificados como OGV muestran usos subtítulos en formato SRT, además se muestran los últimos tweets de cada entrevistado.

Para terminar esta crónica agradecer a Orton el descubrimiento de la extensión para Mozilla Firefox, Firefogg. Una extensión que permite codificar vídeo en OGG y que está continuamente actualizado a la última versión del códec.

Fotos realizadas por Ricardo Barquín. Más en la cuenta de Flickr de ZEMOS98.

• html5
• open video
• software libre
• video

• 
• 
• 
•