4 ms·

Ambilight for HML5's tag, in Javascript.

56 points by bkudria 17y ago

bkudria 17y ago
Explanation, in Russian: http://chikuyonok.ru/2010/03/ambilight-video/ http://chikuyonok.ru/2010/03/ambilight-video/ Google translated: http://translate.google.com/translate?js=y&prev=_t&hl=en&ie=UTF-8&layout=1&eotf=1&u=http://chikuyonok.ru/2010/03/ambilight-video/&sl=ru&tl=en http://translate.google.com/translate?js=y&prev=_t&h...
- qeorge 17y ago
  Thanks, that really helps a lot. I didn't realize that the glow's colors were based on the video. Incidentally, I'm impressed with Google's Russian => English translation. I don't usually expect anything readable, but this article was fine.
taitems 17y ago
This is really impressive, but I found the effect really distracting and annoying. It's most probably the delay/lag that makes it look jarring.
- bkudria 17y ago
  Runs pretty smoothly here - maybe it's your browser/system?
  - glhaynes 17y ago
    I'm on a pretty fast machine running latest Safari and you can tell the glow is behind the video because there's a half second or so lag between scene transitions and the glow changing to match.
    - taitems 17y ago
      I'm not sure how to post code on HN but I found the default settings that explain the "half second" lag: var default_settings = { brightness: 2.7, saturation: 1.4, lamps: 5, block_size: 40, update_interval: 500, fade_time: 400 };
      - jordyhoyt 17y ago
        Two spaces before a line of code does the trick: var default_settings = { brightness: 2.7, saturation: 1.4, lamps: 5, block_size: 40, update_interval: 500, fade_time: 400 };
- Torn 17y ago
  Lastest chrome build, the colours are in pretty much in sync with the video. I'd like to see this on youtube's HTML5 page!
sh1mmer 17y ago
This is based on a Philips invention for their TVs (http://en.wikipedia.org/wiki/Ambilight http://en.wikipedia.org/wiki/Ambilight) however, the difference is that this HTML5 video doesn't occupy most of the users vision. Since these TVs are high-end (and thus large) and are viewed at a distance the picture fills the majority of the screen. However ambilight as a fraction of the screen that's much closer to my face felt very distracting. If the effect was more subtle it might be better, but especially bright colours like reds were pretty distracting.
fierarul 17y ago
I was surprised the javascript code ran so fast it could change the lighting in what seemed real-time to me. I didn't expect to see video scripting inside a browser.
ZeroGravitas 17y ago
I can't access this site, but this was one of the demos Dailymotion did last year before they implemented Theora for their video site: http://www.dailymotion.com/openvideodemo http://www.dailymotion.com/openvideodemo The demo only works on Firefox it seems, but does a few interesting things including blurring, colorizing, extracting thumbnails etc. from the live playing video. There also seems to be general surprise that you can do this kind of thing with HTML5 video and javascript which makes me think this impressive demo hasn't been seen by enough people: http://people.mozilla.com/~prouget/demos/DynamicContentInjection/play.xhtml http://people.mozilla.com/~prouget/demos/DynamicContentInjec... There's other similar mozilla demos showing greenscreen effects, tracking of objects, linking dynamic graphs to data embedded in videos.
superted 17y ago
Anyone know if there is a mirror for this site? Seems to be down for me.

56 points by bkudria 17y ago

Explanation, in Russian: http://chikuyonok.ru/2010/03/ambilight-video/ http://chikuyonok.ru/2010/03/ambilight-video/ Google translated: http://translate.google.com/translate?js=y&prev=_t&hl=en&ie=UTF-8&layout=1&eotf=1&u=http://chikuyonok.ru/2010/03/ambilight-video/&sl=ru&tl=en http://translate.google.com/translate?js=y&prev=_t&h...

qeorge 17y ago
Thanks, that really helps a lot. I didn't realize that the glow's colors were based on the video. Incidentally, I'm impressed with Google's Russian => English translation. I don't usually expect anything readable, but this article was fine.

taitems 17y ago

This is really impressive, but I found the effect really distracting and annoying. It's most probably the delay/lag that makes it look jarring.

bkudria 17y ago
Runs pretty smoothly here - maybe it's your browser/system?
- glhaynes 17y ago
  I'm on a pretty fast machine running latest Safari and you can tell the glow is behind the video because there's a half second or so lag between scene transitions and the glow changing to match.
  - taitems 17y ago
    I'm not sure how to post code on HN but I found the default settings that explain the "half second" lag: var default_settings = { brightness: 2.7, saturation: 1.4, lamps: 5, block_size: 40, update_interval: 500, fade_time: 400 };
    - jordyhoyt 17y ago
      Two spaces before a line of code does the trick: var default_settings = { brightness: 2.7, saturation: 1.4, lamps: 5, block_size: 40, update_interval: 500, fade_time: 400 };
Torn 17y ago
Lastest chrome build, the colours are in pretty much in sync with the video. I'd like to see this on youtube's HTML5 page!

sh1mmer 17y ago

This is based on a Philips invention for their TVs (http://en.wikipedia.org/wiki/Ambilight http://en.wikipedia.org/wiki/Ambilight) however, the difference is that this HTML5 video doesn't occupy most of the users vision. Since these TVs are high-end (and thus large) and are viewed at a distance the picture fills the majority of the screen. However ambilight as a fraction of the screen that's much closer to my face felt very distracting. If the effect was more subtle it might be better, but especially bright colours like reds were pretty distracting.

fierarul 17y ago

I was surprised the javascript code ran so fast it could change the lighting in what seemed real-time to me. I didn't expect to see video scripting inside a browser.

ZeroGravitas 17y ago

I can't access this site, but this was one of the demos Dailymotion did last year before they implemented Theora for their video site: http://www.dailymotion.com/openvideodemo http://www.dailymotion.com/openvideodemo The demo only works on Firefox it seems, but does a few interesting things including blurring, colorizing, extracting thumbnails etc. from the live playing video. There also seems to be general surprise that you can do this kind of thing with HTML5 video and javascript which makes me think this impressive demo hasn't been seen by enough people: http://people.mozilla.com/~prouget/demos/DynamicContentInjection/play.xhtml http://people.mozilla.com/~prouget/demos/DynamicContentInjec... There's other similar mozilla demos showing greenscreen effects, tracking of objects, linking dynamic graphs to data embedded in videos.

superted 17y ago

Anyone know if there is a mirror for this site? Seems to be down for me.