Clipping de vídeo usando HTML5 y SVG en Firefox4

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

Adobe dejará de lado al SVG

adobe.pngAbode ha decidido dejar el desarrollo del visor de SVG a partir del 1 de enero de 2008. A partir del 1 de enero de 2009 no se podrá descargar de los servidores de Adobe.
Algo que nos esperábamos todos los somos usuarios de SVG desde el mismo momento en el que Adobe compró Macromedia, teniendo en cuenta que SVG y Flash podría considerarse “la competencia”.
La verdad es que parece que SVG no despunta demasiado, pero el hecho de que Firefox y Opera incluyan visores propios de SVG es algo que quita preocupación a esta noticia.
Vía / SVG.org