SVG Filters on HTML5 video
March 28th, 2010
This weekend I hung out with some SVG all-stars and learned how SVG, HTML, and CSS can combine for some badass visual filters applied to content. Clearly it's the most fun to apply it to <video>, though I could have done it to any HTML. Peep the video:
Demo page: SVG filters on html5 <video> (requires a Firefox nightly)
Blur is certainly the most useful, I'd say. For instance, Mike Matas's new site could dynamically blur the images instead of manually cutting blurred jpgs.
Leave a comment if you can think of other use cases for filters like these on your HTML content.
Blur could also be used to simulate objects being out of focus, like in cartoons and movies or even bokeh (not sure if that would work though).
Interesting stuff. I wrote an article on what HTML 5 lacks compared to Silverlight and this is one of those things I thought HTML 5 could not do. You post clarified that HTML 5 eventually will and I why I haven't seen examples (because its only supported by the nightly Firefox build).
One of my concerns about this is the speed this will work compared to Pixel Shaders (which Silverlight uses). Plus I can't imagine that JavaScript would be able to work as fast as compiled C#/.NET code. Do you have any insight on that?
http://silverlighthack.com/post/2010/02/08/Top-Reasons-why-HTML-5-is-not-ready-to-replace-Silverlight.aspx
@bart:
svg is not new and the idea of applying it to the tag isn't either. Opera did some cool demonstrations with and svg filters a few years ago ( http://dev.opera.com/articles/view/a-call-for-video-on-the-web-opera-vid/ see links at the bottom).
About JS speed, you probably noticed that browser vendors are now all changing the way their approach for javascript engines. They are/will be generating native code which runs fast, really fast :
- Chrome -> V8
- Firefox -> JägerMonkey
- Safari -> SquirelFish
- Opera -> Carakan
- IE (9) -> Chakra
You'll find a lot of articles comparing each others speed and some comparisons with Flash Player.
I should also point out Opera should be able to do this in 10.50 final, though it probably takes in the video as a foreignObject, something my demo doesnt do. (It would pick up FF3.6 support that way as well)
RAD!
I know SVG has been around for a while..actually played with a little back in 2001.
I am really interested in seeing the "complete package": Canvas, SVG, CSSS, video, fast JavaScript, Web workers and Web GL all working together. In Silverlight/Flash it is a joy to work with this stuff, because it just works all in a single markup and design.
My concern is twofold: how will all of these guys play together (which is still a wait an see..anyone who says otherwise is lying) and the design experience. The latter is key, because if you need to know 4-6 technologies to do a cool HTML 5 effects, then that is a problem.
HTML has been around for 2 decades and no one has figured out a good design tool that can marry: HTML, JavaScript, CSS together. There are so many JavaScript frameworks or CSS frameworks out there that its really hard to standardize in a single design tool.
A photoshop contractor I know (no RIA experience) was able to mock up a semi-working app in Expression Blend 3 in a couple weeks. With over 15 screens. The guy is a template/graphics/touch up old photos contractor….what can he use in HTML 5? That I think is imperative for true dynamic HTML 5 to shape itself.
That's very cool. I've often wanted to be able to apply a black & white filter to images for art direction reasons, but having to dedicate server resources to it never made sense (think gravatars).
Very, very cool.
I think Bart has a point about the challenge of creating a unified IDE for the constellation of HTML5 technologies… but I don't think it's an unsolvable problem. Adobe and Microsoft are both about halfway there, if only they would fully embrace the open web instead of pushing their alternatives.
Or it's an opportunity for some new player to make a name for themselves, and make a ton of money in the process.
Nice work, daily motion demonstrated a lot of these filters in their open video demo page when FF3.5 was released http://www.dailymotion.com/openvideodemo
@Ryan
Dude, good call! I saw these back then but totally forgot.
They have a nice implementation.
Would it be possible to apply the multiply filter to a colored HTML div using SVG filters, or is there a better way?
I was at this too. It was pretty cool doing the hands-on lab that they did. I didn't make anything this cool with it, but it was fun for sure. Didn't know you were there.