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.
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:
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:
font-family:Arial Black, sans-serif;
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.