Evangelism/Firefox3.5/35Days/Articles/Round

The video tag is part of the HTML 5 specifications. That means this tag works like any other HTML tags. You can define its style via CSS and control it through Javascript.

Well, that means the video tag does work with other web standards like CSS 3, SVG and Javascript.

This demo demonstrates why the fact that the video tag is part of the OpenWeb standards is, somehow, important.

Here, we show how to combine SVG (filter & clip-path), CSS 3 (transformation) and the video tag.

• the video player is mainly based on SVG elements (the play/pause button);
• the video is in a disc, thank the clip-path CSS rule (from a SVG shape);
• originally, the video is in color, but if the mouse pointer is out of the video, the video is in black & white. It's another SVG feature: filter (bound via CSS);
• the video is rotating, thank the new CSS 3 rule transform: rotate.

And since the standards are, by default, open-source, if you want to know more, feel free to read the source code and to hack it :)

And obviously, all these new features are documented in MDC.