Mozilla

This is another demo from Paul Rouget. It’s a very simple demonstration of what you can do when you combine video, SVG and some fun transformations.

View the Demo in Firefox 3.5
tristan

This puts a HTML5-based <video> element into an SVG document like so:

<svg:svg xmlns:svg="http://www.w3.org/2000/svg"
               width="194" height="194">
  <svg:foreignObject x="1" y="1" width="192" height="192">
    <html:video src="tristan3.ogv" ontimeupdate="rotateMePlease()"/>
  </svg:foreignObject>
</svg:svg>
Lots of code and many attributes removed for clarity. Please view the source for more details.

If you look at the rest of the source code you will also see that the rest of the player is also defined and controlled from SVG. And we’re also using some of the CSS and SVG capabilities that are in Firefox 3.5 to define the player as well. For example if you look at the CSS you will see:

#video {
    filter: url(#filter);
    clip-path: url(#circle);
}

The clip-path property lets you define a clip path for any element – html, svg or otherwise. This can be extremely powerful and can be any arbitrary path defined in SVG. Much like a cookie cutter this cuts out the center of the otherwise square video and uses that for display. Here’s what our clip path looks like:

<svg:clipPath id="circle" clipPathUnits="objectBoundingBox">
   <svg:circle cx="0.5" cy="0.5" r="0.5"/>
</svg:clipPath>

The filter property lets you define an SVG filter to use in the same way as a clip path. In our case we use a feColorMatrix:

<svg:filter id="filter">
  <svg:feColorMatrix values="0.3 0.3 0.3 0 0 0.3 0.3 0.3 0 0 0.3 0.3 0.3 0 0 0 0 0 1 0"/>
</svg:filter>

Although it is not used in this demo note that you can also use SVG to define gradient masks for any element in Firefox 3.5 as well.

When the video runs it uses the transformation property to rotate the video while it’s playing:

function rotateMePlease() {
    // Sure
    if (!video) return;
    video.style.MozTransform='rotate(' + i + 'deg)';
    i += 3;
}

You will notice that Paul built this into an XHTML document, carefully using namespaces and XML syntax. But most people would probably want to use SVG in plain-old-HTML. In Firefox 3.5 there is a way to do this using SVG External Document References. What this means is that instead of defining your SVG in the HTML file directly you can define it in its own file and refer to it through CSS like this:

.target { clip-path: url(resources.svg#c1); }

What this does is load the SVG from the resources.svg file and then use the object with the ID “c1″ as the clip path for the target. This is a very easy way to add SVG to your document without making the full switch to XHTML.

I hope that this gives you a taste of what’s possible when mixing SVG, HTML, video and CSS all together. Enjoy!

20 comments

Comments are now closed.

  1. Thomas Broyer wrote on June 18th, 2009 at 01:17:

    Makes me think of the demos from Microsoft showing how XAML/WPF is powerful ;-)

  2. Ken Saunders wrote on June 18th, 2009 at 02:18:

    Wow, that’s so very cool (and funny).
    Great demonstration.

  3. Quezako wrote on June 18th, 2009 at 03:15:

    How many degrees washes a Tristan? ;)

  4. Jason Orendorff wrote on June 18th, 2009 at 13:25:

    This is cool, but it would have been cooler if Tristan had been blowing bubbles.

  5. Pingback from 颠覆网络35天 ─ Tristan牌滚筒洗衣机 < MJiA on June 18th, 2009 at 22:20:

    […] 原文地址:the tristan washing machine 系列地址:颠覆网络35天 […]

  6. N wrote on June 24th, 2009 at 02:08:

    I just love how the video controls rotate with the video :-)

  7. Pingback from Monthly Interesting Links Roundup (June 2009) - 2 on June 26th, 2009 at 00:44:

    […] Open video in the background, CSS mask (yes, real masking) using a vector image (SVG, not some pixelated jpeg/png/gif), javascript to turn the video frame around (no it’s not the camcorder that’s being rotated). http://hacks.mozilla.org/2009/06/tristan-washing-machine/ […]

  8. belarmino wrote on July 2nd, 2009 at 19:55:

    espero la copia ya que poseeo el 3.0

  9. Pingback from Así es el nuevo Firefox 3.5 « UN BLOG SHULO! on July 2nd, 2009 at 21:44:

    […] se pueden ver un par de ejemplos en Firefox 3.5: http://hacks.mozilla.org/2009/06/tristan-washing-machine y http://people.mozilla.com/~prouget/demos/DynamicContentInjection/play.xhtml. ¡Es increíble lo […]

  10. Pingback from » Blog Archive » Así es el nuevo Firefox 3.5 on July 3rd, 2009 at 11:46:

    […] se pueden ver un par de ejemplos en Firefox 3.5: http://hacks.mozilla.org/2009/06/tristan-washing-machine y http://people.mozilla.com/~prouget/demos/DynamicContentInjection/play.xhtml. ¡Es increíble lo […]

  11. Pingback from Así es el nuevo Firefox 3.5 » OkeyPeru.NeT on July 3rd, 2009 at 18:00:

    […] se pueden ver un par de ejemplos en Firefox 3.5: http://hacks.mozilla.org/2009/06/tri…ashing-machine y http://people.mozilla.com/~prouget/d…ion/play.xhtml. ¡Es increíble lo que podemos hacer […]

  12. Pingback from Así es el nuevo Firefox 3.5 - [:: WWW.ARKANGELES.BIZ ::] on July 4th, 2009 at 00:21:

    […] se pueden ver un par de ejemplos en Firefox 3.5: http://hacks.mozilla.org/2009/06/tri…ashing-machine y http://people.mozilla.com/~prouget/d…ion/play.xhtml. ¡Es increíble lo que podemos hacer […]

  13. Pingback from Assim é o novo Firefox 3.5 | Patrijosa.INFO on July 4th, 2009 at 04:06:

    […] http://hacks.mozilla.org/2009/06/tristan-washing-machine […]

  14. Pingback from Así es el nuevo Firefox 3.5 | 21segundos.com on July 6th, 2009 at 15:26:

    […] se pueden ver un par de ejemplos en Firefox 3.5: http://hacks.mozilla.org/2009/06/tristan-washing-machine y http://people.mozilla.com/~prouget/demos/DynamicContentInjection/play.xhtml. ¡Es increíble lo […]

  15. Pingback from Así es el nuevo Firefox 3.5 | Unión de Bloggers Hispanos on July 7th, 2009 at 06:00:

    […] usando tecnologías web como CSS y SVG.Aquí se pueden ver un par de ejemplos en Firefox 3.5: http://hacks.mozilla.org/2009/06/tristan-washing-machine y http://people.mozilla.com/~prouget/demos/DynamicContentInjection/play.xh…. ¡Es increíble lo […]

  16. Pingback from video - more than just a tag at hacks.mozilla.org on July 7th, 2009 at 20:05:

    […] some new snazzy new CSS features, you can do some really fantastic things. Take a look at the infamous washing machine demo, in which I subject an esteemed colleague to some rotation. It uses several CSS […]

  17. yareli wrote on November 16th, 2009 at 10:06:

    ola is yo español is a liceo hipainme name is yareli tem 9 años

  18. Pingback from 50个最酷的HTML5 高级应用实例 - Dream step on January 25th, 2011 at 22:09:

    […] 19. The tristan washing machine […]

  19. Pingback from 50个HTML5的超炫的示例 | 移动应用开发工作室 on July 28th, 2011 at 19:08:

    […] 19. The tristan washing machine […]

  20. Pingback from HTML5 例子 | PHP教程 – PHP、Oracle、MySQL、Js、Jquery教程、基础、实例 on March 28th, 2012 at 23:53:

    […] 19. The tristan washing machine […]

Comments are closed for this article.