Similar Posts
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.
Vía / Project London Trailer
CSSRound: crear esquinas redondeadas fácilmente
CSSRound es una aplicación que nos permite generar estilos, HTML e imágenes para crear cajas con esquinas redondeadas de forma muy sencilla.
Tan solo tendremos que indicar el radio de la esquina, el color de fondo de la capa, el color de la caja redondeada, el color de la letra, el ancho de la caja y el contenido, y nos devolverá todo lo necesario para mostrar el diseño en nuestra página.
CSSRound