SVG Masks, HTML5 video and Firefox 4

July 17th, 2010

Earlier this month, Paul Rouget, who’s a evangelist for Mozilla posted a video where he demonstrated some of the new features that are coming with Firefox 4. And I have to say, the stuff he shows off is for the first time, a real example of how HTML5 and CSS3 can replace things like basic Flash animation. A lot of the stuff he shows off is really amazing and one that stuck out at me was around the 4 minute mark, where the text Firefox acts as a mask for a video. Now, this was definitely something that could only be accomplished in Flash, so I really wanted to know how to do it and unfortunately there was nothing out there to tell me how. After some trial and error though, I managed to figured it out, mainly because, thanks to Firefox 4, it’s not at all that hard.

Here’s what what I made. It only works in Firefox 4, so it’s not something that you can throw up on a site right now, but it is a great example of what we are going to be able to do in the next few years.

Check out the demo here. (This only works in Firefox 4)

How is it done? Using Firefox 4’s inline SVG, HTML5, some CSS and not a lot of any of it. Here’s all the HTML I used:

1
2
3
4
5
6
<video id="video_target" src="oceans-clip.ogg" type="video/ogg" autoplay></video>
<svg>
   <mask id="video_mask" maskUnits="userSpaceOnUse">
       <text x="300" y="190">VIDEO</text>
   </mask>
</svg>

The video is a clip from Disney’s Oceans that I got from Video JS. Since this only works in Firefox 4, I went with the ogg video. In HTML5 the video tag is just like any other tag so you can control it like you would an image tag. What Firefox 4 allows us to do is create some SVG text and then use it as a mask without the need to use an xml doctype like SVG needed before. Another plus is that the actual <svg> tag can be placed anywhere in the HTML and will be assigned to the targeted tag, in our case here the <video> tag. To make this work, we wrap the SVG <text> inside a <mask> tag, giving <mask> the id of video_mask, which we need to assign the mask in the CSS and we need to set the maskUnits to “userSpaceOnUse”. I’ll be honest with you, I don’t really understand this part, but in everything I found this was the setting for text and maskUnits=”objectBoundingBox” maskContentUnits=”objectBoundingBox” is used for shape masks. The video tag has the x and y positions set to center the text.

For the CSS:

1
2
3
4
5
6
7
8
9
10
text {
   font-family:Arial Black, sans-serif;
   font-size:167px;
   text-anchor: middle;
   letter-spacing:1px;
   fill:#fff;
}
#video_target {
   mask: url(#video_mask);
}

First off, we’re styling the text, nothing different here except we need to set the fill to white. If the fill is set to black, nothing shows through the mask and the closer the fill color gets to white, the more that shows through. Next, we set video_target’s mask to url(#video_mask). And that’s it.

And, this is what we get. (Remember, it only works in Firefox 4)

Something that for years you could only do in Flash you can now do with 6 lines of HTML and about 10 lines of CSS. No JavaScript or anything like that to rely on. This is something that should be exciting the web design community, especially if the other major browsers implement this.

2 Responses to SVG Masks, HTML5 video and Firefox 4

  1. matt says:

    i am in the process of re-designing our site. i have been doing it in html 5, using adobe muse and edge, with some tumult hype thrown in there. i am new to html 5, but love flash animation.

    my question is, i want to use a mask on an animation, ie i have an oval shaped logo (the bowhaus logo) that will have a metallic shine with lighting intermittently running across the face of the logo. simple tweened keyframe animation, not video.

    can you use an svg mask for this, similar to your video mask… in a way that works across all html 5 friendly browsers, not just ff?

    matto

  2. Mike says:

    As far as I know, SVG masks only work in Firefox and Webkit browsers. For the effect you want, you might have to fake it with an image and JavaScript/jQuery.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>