Thursday, July 10, 2008

Video Bling

Robert O'Callahan has been posting about his 'bling branch' which contains some very nice effects. See his blog posts for more detail:As soon as I saw these I had to try the effects with a playing video. The video patches apply fine to the svg-integration branch.

The screencast below is from this special build, displaying a video played using <video>. There is a reflection below it using the tricks from Robert's posts. Shortly after that I change to a video playing that uses an SVG filter for edge detection when I mouse over the video. Finally there is a video with both effects combined.

You can download the video_bling.ogg file to play, or if you have a <video> enabled browser you can see it below. I've also uploaded it to YouTube.



Categories: ,

Labels:

7 Comments:

Blogger bazzargh said...

Would it be possible to do something like this

... a rain spattered window effect. Blur the background video, overlay with multiple copies of the video inverted in raindrops, gradient fill on the raindrop to give the impression of curvature. It sounds possible with the features in there now.

1:54 AM  
Blogger David Craig said...

Fun, but amazingly useless. The only more useless video thing I have seen was 4 videos playing on a spinning cube (Vista Avalon demo).

5:29 AM  
Blogger Gerv said...

Awesome :-)

8:35 PM  
Blogger RichB said...

Wow - I think this shows how deeply you've embedded video support in the Gecko rendering pipeline.

david craig: Imagine Firefox 3.1 having new tabbed browsing support where you can see live thumbnails of all the tabs - some of them have video playing. The rendering of these thumbnails could use a mirror effect (very Apple) and could also apply an SVG filter on mouseover to give a visual affordance.

This sort of homogeneous support is what is currently missing from HTML and why developers are driven to Silverlight where the XAML is homogeneous and combinable. It's totally infuriating to have an HTML <select> without being able to place images, videos and other markup into each list item.

4:06 AM  
Blogger cybernytrix said...

This is exciting!
I would like to build it to, but I am new to Mozilla development, can you please tell me if I can get this directly off GIT?
I know I can switch between ogg or gstreamer branches (after reading your tutorial)
Thanks!

9:22 AM  
Blogger ian said...

I often wish I had 4 videos on a spinning cube. Every time I see 4 videos on a spinning tetrahedron, I wish they were on a cube instead.

And I'm so glad that the "glossy table reflection" effect isn't going out of style! I think there are still a few thousand websites that aren't using it yet.

2:36 AM  
Blogger stelt said...

Does SVG filters on the whole HTML page work in this build?

9:40 PM  

Post a Comment

<< Home