Diseño y Desarrollo

Cómo aplicar una máscara a un video en HTML5 con SVG

En este tutorial aprenderemos de forma sencilla cómo aplicar una máscara a un video en HTML5 ayudándonos de SVG (Scalable Vector Graphics). Comencemos por explicar que las nuevas especificaciones de la W3C me permitirán embeber video mediante la etiqueta <video></video>.

Claro, aún existen algunas inconsistencias, entre ellas la más destacada es que aún no hay un formato estándar bien definido para todos los browsers. Actualmente son tres los formatos aceptados: OGG, MP4 y WEBM. De tal forma que al día de hoy, los browsers más famosos se comportarán del siguiente modo:

Entonces crearemos un nuevo documento de tipo HTML5 en el cuál lo primero que haremos será embeber nuestro video. Ojo, esta forma de enmascarar un video con SVG por ahora sólo funciona con browsers basados en webkit, así que lo testearemos sobre chrome y podemos usar cualquier formato de video, según la tabla anterior, en mi caso usaré un MP4.

Entonces tendremos como resultado que hemos embebido en unas cuantas líneas nuestro video, cosa que en el pasado jamás fué tan  sencillo como ahora. Si deseas ahondar sobre los atributos que puedes utilizar con la etiqueta video, puedes consultar en la página de la W3c: http://www.w3.org/wiki/HTML/Elements/video

Lindo, muy lindo, sí, sin embargo no es lo que queremos, queremos enmascarar este video que hemos incrustado, de tal forma que sólo se muestre dentro de las regiones gráficas especificadas por mí. Esto lo haremos mediante SVG.

Primero que nada, al hablar de SVG nos referimos a una especificación para escribir gráficos vectoriales basados en XML. Dicha especificación posee incluso etiquetado para dibujar formas geométricas, líneas, curvas, hasta texto. Lo interesante es que podremos crear mediante SVG gráficos tanto estáticos como animados.

De hecho, pueden crear mediante programas como Illustrator ó Inkscape sus propios SVG’s a partir del trazo de vectores.

Pero bueno, para este ejemplo crearemos nuestro SVG pero lo haremos de forma manual. Pondremos en práctica el uso de  una máscara basada en texto SVG a nuestro video. Necesitamos crearlo bajo la especificación XML tal como lo mencionamos inicialmente.

Básicamente crearemos un nuevo documento y lo guardaremos como “texto.svg”. En él necesitamos especificar algunos atributos, como la definición que será una máscara, su posición en X y Y, el tamaño y familia de la fuente y el color de relleno. Si desean ahondar en el tema de los atributos de texto SVG les recomiendo chequen la página: http://www.w3.org/TR/SVG/text.html

Si probamos esto sobre el navegador obtendremos como resultado lo siguiente:

Una vez hecho esto, necesitamos decirle al HTML principal, mediante CSS, que el video incrustado usará como máscara el SVG que hemos creado (texto.svg). Para ello usaremos la propiedad “webkit-mask” apuntando a nuestra máscara en SVG.

Y entonces obtendremos un resultado bastante atractivo, ahora tenemos nuestro video corriendo perfectamente enmascarado en el texto que creamos. Para mayor referencia sobre “-webkit-mask” les recomiendo echen un vistazo en: http://css-infos.net/property/-webkit-mask

Sencillo no creen? Si en lugar de especificar el SVG de texto hubiéramos especificado la ruta de un SVG creado a partir de formas geométricas o incluso creado por nosotros mismos, igual hubiese respetado la máscara. Espero les haya gustado este tuto, les dejo el archivo final comprimido en zip a continuación:

 http://www.g3ekarmy.com/wp-content/uploads/2012/09/mascara_video_svg.zip

Comments
To Top