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

<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, he puesto el borde semi-transparente para que se vea el clipping como va.

Demo

Vía / Project London Trailer

Share Button

Tiled Based Vector & Raster Maps using SVG and Javascript

Polymaps is a display and interaction library for tile-based vector and raster maps using SVG and Javascript. Their intent is to provide a minimal, extensible, customizable, and free display library for discriminating designers and developers who want to use interactive maps in their own projects.Polymaps provides speedy display of multi-zoom datas …

Post original

Share Button

typeface.js: hacer render de texto y fuentes con javascript

typeface.js es una librería que nos permite crear texto usando fuentes mediante javascript (canvas, SVG o VML para IE). El uso es muy sencillo:

&lt;div class="myclass typeface-js" style="font-family: Helvetiker"&gt;
Text here in Helvetiker font...
&lt;/div&gt;

Además ofrece una utlidad en Perl que permite convertir truetypes a trucefaces.

typeface.js

Vía / WebAppers

Share Button

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
Share Button