Revista Informática

Clipping de vídeo usando HTML5 y SVG en Firefox4

Publicado el 23 marzo 2011 por Displaynone

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).

Clipping de vídeo usando HTML5 y SVG 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

<svg width="300" height="250" id="svg2">
  <clipPath id="clip">
    <use xlink:href="#borde"/>
  </clipPath>
  <g id="player" >
    <path
       style="fill:none;stroke:#014700;stroke-width:10;stroke-opacity:0.7;"
       d="m 40,20 S 20,20,20,40 C 20,50,30,220,60,230 C 90,250,270,190,280,180 C 310,160,260,70,250,60 C 200,0,40,20,40,20 z"
       id="borde" />
    <g id="pause" style="fill:#000000;fill-opacity:0.3;display: none">
      <rect y="100" x="125" height="50"
         width="20" id="rect3590"
         style="color:#000000;fill:#000000;fill-opacity:0.3" />
      <rect y="100" x="150" height="50"
         width="20" id="rect3590"
         style="color:#000000;fill:#000000;fill-opacity:0.5" />
    </g>
    <path
       style="color:#000000;fill:#000000;fill-opacity:0.5"
       id="play" d="m 125,100 L 125,150 L 175,125 z" />
  </g>
</svg>

Vídeo

<video style="clip-path: url(#clip);" preload="auto" autobuffer="" src="http://videos.mozilla.org/serv/mozhacks/demos/resources/londonproject/fight.ogv" tabindex="0" id="video" ></video>

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

Demo

Vía / Project London Trailer


Volver a la Portada de Logo Paperblog