Popcorn.js librería Javascript que permite sincronizar vídeo y contenido en HTML5

ByLuis

Popcorn.js es una librería que permite sincronizar la etiqueta <video> de HTML5 con contenido que deseemos mostrar. Para ello utiliza las propiedades, métodos y eventos nativos de HTMLMediaElement. Además ofrece un sistema de plugins desarrollados por la comunidad:

document.addEventListener("DOMContentLoaded", function () {
      // Create a popcporn instance by calling Popcorn("#id-of-my-video")
      var pop = Popcorn("#video");
      // play the video right away
      pop.play()
      // add a footnote at 2 seconds
        .footnote({
          start: 2,
          end: 6,
          text: "This footnote is the stepping stone of progress!",
          target: "footnotediv"
        });
    }, false);

Podéis ver algunos ejemplos bastante interesantes. Una librería muy útil para presentaciones y vídeos corporativos.

Popcorn.js

|

Clipping de vídeo usando HTML5 y SVG en Firefox4

ByLuis

La verdad es que Firefox4 está de lujo, y las demos que ofrece Mozilla son increíbles. De una de ellas he sacado cómo hacer clipping en vídeos usando HTML5 y la posibilidad de incrustar SVG (sólo funciona en Firefox4).

El método es sencillo, tengo un SVG que muestra el contorno y los botones de play y pausa, además tiene un clipPath que se usará para el estilo clip-path del vídeo:

SVG

Vídeo

Javascript

var play = document.getElementById('play');
var pause = document.getElementById('pause');
var video = document.getElementById('video');
play.addEventListener('click', function() {
    play.style.display = 'none';
    pause.style.display = 'block';
    video.play();
  }, true);  
pause.addEventListener('click', function() {
    play.style.display = 'block';
    pause.style.display = 'none';
    video.pause();
  }, true);  
video.addEventListener("ended", function() {
    play.style.display = 'block';
    pause.style.display = 'none';
    video.pause();
  }, true);

El vídeo es el mismo que el de la demo de Mozilla, he puesto el borde semi-transparente para que se vea el clipping como va.

Demo

Vía / Project London Trailer

|

Manipular vídeos con HTML5 y canvas

ByLuis

Increíbles ejemplos de cómo manipular vídeos en directo aplicando filtros gracias a HTML5 y canvas. Los ejemplos nos muestra cómo se reproduce un vídeo y se muestra el mismo vídeo con efecto de escala de grises o detección de contornos. Realmente increíble.

Post original

ffmpeg-php: obten información de tus videos y sonidos mediante PHP

ByLuis

ffmpeg-php es una librería para acceder y recuperar información de ficheros de video y audio.
Con esta librería se pueden obtener frames de los ficheros de video como imágenes para luego manipularlas con las funciones GD de PHP. Muy útil para crear thumbnails de los videos que poseemos. De los ficheros audio se puede obtener la duración y el bitrate. Son varios los formatos de audio (mp3, wma, …) y de video (mov, avi, mpg, wmv, …) los que admite esta librería.
Entre las características que nos ofrece, nos encontramos con lo siguiente: orientado a objetos, obtener imágenes de los frames de un video, crear GIFs animados de los frames de un video o de imágenes GD, utiliza las características de ffmpeg para redimensionar y recortar los frames obtenidos, obtener de los ficheros mp3 la información meta de los archivos.
Para utilizar esta librería es necesario ffmpeg-0.4.9_pre1, php-4.3.0 y gd-2.0.
ffmpeg-php

|

Incluye tus vídeos en tu web

ByLuis

si ya hace tiempo explicábamos cómo subir un vídeo en formato FLV a tu web y verlo mediante un visor incluido en la página web, ahora se trata de un artículo donde explican cómo hacer, de forma muy detallada, para casi todos los formatos de vídeo más comerciales, mostrar el vídeo en formato Flash (FLV).
En este caso se centran en los formatos de QuickTime, Windows Media y Abode Flash (aunque usando herramientas comerciales y no opensource como indicamos en el artículo anterior). Primero nos indican que debemos obtener la información del vídeo, luego codificarla y por último mostrarla.
Yo me sigo quedando con la alternativa opensource, pero es indiscutible que la explicación que nos ofrecen es de lo más completa.
The Rise of Flash Video, Part 3: Tackle your own project with this step-by-step primer

Yahoo! video lanzado

ByLuis

Yahoo!Yahoo! no se ha quedado atrás y ha lanzado su propiar versión de YouTube y Google Video. Aunque con la herramienta MyStudio puedes subir, manejar y compartir videos, aún le faltan ciertas características, como poder obtener el HTML para incluirlo en tu blog, o que se pueda ver en Mac.
Yahoo! Video
Vía / Maestros del Web