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
Demo
Vía / Project London Trailer