Post image for Ambilight for video tag—prepare to cry.

Ambilight for video tag—prepare to cry.

If Sublime Video resulted in a mess in your pants, make sure you take em off before you see for this one. Ambilight for video tag. At first it looks like an average video player, the kind that loads standard HTML5 video. As the video plays, you very quickly notice what’s happening at the edges. The plugin automatically grabs the average colour in each area, and spreads it across the bounds of the video. This is not a new concept, as there have been hardware ambilights as well as Flash® versions of the same. What makes this one special, is that it’s written entirely using HTML5.

Okay you may put your pants back on now. Sergei Chikuenok the developer, explains the process (in Russian), so you can follow along using Google Translate and try to make sense of it. In its current state—more to do with his implementation than the technology—the transitions are kind of jarring and distrating. But given that anyone (with the skills) could achieve such effects, the future of Ambilight for video tag looks bright indeed.

{ 10 trackbacks }

Ambilight en HTML 5 | bbxdesign
March 9, 2010 at 2:50 PM
HTML5 Makes Me Cry Tears of Joy: Ambilight Video Tag | ChurchCreate
March 14, 2010 at 3:34 AM
HTML5 video Libraries, Toolkits and Players - Speckyboy Design Magazine
April 23, 2010 at 2:51 PM
HTML5 video Libraries, Toolkits and Players | Forum on China Wholesale Lots
April 23, 2010 at 3:53 PM
HTML5 video Libraries, Toolkits and Players | Blog Studio Cassette
April 23, 2010 at 9:52 PM
HTML5 video Libraries, Toolkits and Players | DesignerLinks | Home to Web design news, jQuery Tutorials, CSS tutorials, Web Designing tutorials, JavaScript tutorials and more!
April 23, 2010 at 10:52 PM
HTML5 video Libraries, Toolkits and Players | crazyegg.net
April 24, 2010 at 4:29 PM
HTML5 Video Libraries, Toolkits and Players | InfoKwik Marketing & SEO
May 3, 2010 at 3:27 AM
HTML video Libraries, Toolkits and Players « Ulancer
May 25, 2010 at 6:55 AM
HTML5 video Libraries, Toolkits and Players « Nap5teR
August 17, 2010 at 9:33 PM

{ 19 comments… read them below or add one }

Vojto March 8, 2010 at 5:26 PM

Now this is cool.

Straun March 8, 2010 at 6:21 PM

Bad choice of video. The video carefully times its scene changes to the music, but the ambilight is delayed which detracts from the visual effect, making it more like bad jazz music. I can’t fault the technology, but I would rather have the image fill the screen than be smaller and leave room for the effect.

Billy March 8, 2010 at 9:02 PM

@Straun The video is almost certainly a nod to a predecessor in the video tag implementation department [Sublime Video](http://jilion.com/sublime/video) which if you have not seen yet is definitely worth your time.

Cespur March 8, 2010 at 9:30 PM

This is awesome, too bad of the top and bottom though, but still, freaking awesome.

zproxy March 9, 2010 at 6:02 PM

Awesome work!

Justin Chase March 9, 2010 at 11:25 PM

For crying out loud. Tone down the drama it’s not that amazing.

Jen March 10, 2010 at 1:43 AM

Can’t wait to see your better version Justin (no Silverlightcrap,okay?) ;)

Straun March 10, 2010 at 4:06 PM

Thanks for the link Billy

bob March 11, 2010 at 3:53 AM

zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz

DonBoy March 11, 2010 at 6:16 AM

In my Firefox 3.6, it both barely plays at all and I see no color effect. What am I doing wrong?

Sghost March 11, 2010 at 6:51 AM

Although the technology is VERY cool, I don”t think it adds anything to the video. If anything, it takes away from the video as I’m distracted from what is going on with the changing colors.

DuDe March 11, 2010 at 1:36 PM

I can’t see the big world changing in this one…and also there is a delay in the effect :\

Nice, but it is very far from pants-changing :)

Milind Alvares March 11, 2010 at 4:37 PM

Like I said, “In its current state—more to do with his implementation than the technology—the transitions are kind of jarring and distrating”. Those ‘lights’ however are just gradients drawn in Photoshop, so the effect could be as subtle as possible. The excitement is not about watching that video specifically, but about how HTML5 has progressed.

archdukealex March 11, 2010 at 5:42 PM

The transitions are abrupt, and the gaps in the lighting just look weird, instead of realistic. Although those are just design problems; I can’t wait to see a really polished implementation. A subtler, smoother one.

Sergey Chikuyonok March 12, 2010 at 2:15 AM

I’m working on new ambilight implementation with faster lights change as well as some new cool features. Stay tuned :)

Aine March 12, 2010 at 1:14 PM

Excellent work, Sergey… keep going. :)

JG March 13, 2010 at 2:38 AM

Wow…

oh, Justin, show us what you got…

Babel March 14, 2010 at 12:02 AM

huge delay! it depends on how good you computer is right?

Miltos March 29, 2010 at 10:43 PM

That’s awesome !!!
Also your website it’s the most beautiful I’ve seen!
Congrats!!

Leave a Comment

Previous post:

Next post: