[tweetmeme]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.
29 Comments
Now this is cool.
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.
@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.
This is awesome, too bad of the top and bottom though, but still, freaking awesome.
Pingback: Ambilight en HTML 5 | bbxdesign
Awesome work!
For crying out loud. Tone down the drama it’s not that amazing.
Can’t wait to see your better version Justin (no Silverlightcrap,okay?) ;)
Thanks for the link Billy
zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
In my Firefox 3.6, it both barely plays at all and I see no color effect. What am I doing wrong?
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.
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 :)
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.
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.
I’m working on new ambilight implementation with faster lights change as well as some new cool features. Stay tuned :)
Excellent work, Sergey… keep going. :)
Wow…
oh, Justin, show us what you got…
huge delay! it depends on how good you computer is right?
Pingback: HTML5 Makes Me Cry Tears of Joy: Ambilight Video Tag | ChurchCreate
That’s awesome !!!
Also your website it’s the most beautiful I’ve seen!
Congrats!!
Pingback: HTML5 video Libraries, Toolkits and Players - Speckyboy Design Magazine
Pingback: HTML5 video Libraries, Toolkits and Players | Forum on China Wholesale Lots
Pingback: HTML5 video Libraries, Toolkits and Players | Blog Studio Cassette
Pingback: HTML5 video Libraries, Toolkits and Players | DesignerLinks | Home to Web design news, jQuery Tutorials, CSS tutorials, Web Designing tutorials, JavaScript tutorials and more!
Pingback: HTML5 video Libraries, Toolkits and Players | crazyegg.net
Pingback: HTML5 Video Libraries, Toolkits and Players | InfoKwik Marketing & SEO
Pingback: HTML video Libraries, Toolkits and Players « Ulancer
Pingback: Ambilight for video tag—prepare to cry. | RCC Graphic Designs | Blog