Wednesday, July 27, 2011

OK Go play with HTML5


By Keiko Hirayama, Google Tokyo


All is Not Lost is a new HTML5 music experience based on a three-way collaboration between the band OK Go, dance troupe and choreographers Pilobolus, and Google. In this music experience, you can embed your message in a music video, and have the band dance it out. The band and Pilobolous dancers are filmed through a clear floor, making increasingly complex shapes and eventually words – and messages you can write yourself.



This project principally employs HTML5’s <audio> and <video> tags, along with an event listener to ensure the correct sync of audio and visual components. A challenge, however, was balancing and syncing load, with the potential of too high a load and thus corresponding delays. As a result, we store movies with the <video> tag as a buffer, using the image object in Canvas 2D. The canvas image object allows us to draw the videos in perfect timing with the music and create a smooth experience throughout.



All is Not Lost is best experienced in Chrome -- check it out at allisnotlo.st.

Keiko Hirayama is a Senior Marketing Manager on the Google Chrome team in Tokyo. When she is not at work, she enjoys playing with her 2-year-old boy (but sometimes wishes she has her own time!)

Posted by Scott Knaster, Editor

18 comments:

  1. I can't get it to load, it stops at a random percentage (41, 21, 47, 46) and just spins there.

    ReplyDelete
  2. I have the same problem. OSX 10.6

    ReplyDelete
  3. same here...Win7 x64, Chrome

    ReplyDelete
  4. It seems to stop after about 1 minute, depending on how quickly I press the OK button:

    327 requests ❘ 25.94MB transferred ❘ 1.0min (onload: 1.25s, DOMContentLoaded: 576ms)

    436 requests ❘ 26.51MB transferred ❘ 1.1min (onload: 964ms, DOMContentLoaded: 560ms)

    304 requests ❘ 25.89MB transferred ❘ 57.26s (onload: 1.22s, DOMContentLoaded: 718ms)

    I'm using Chrome 14.0.825.0 beta-m on Win7/x86.

    ReplyDelete
  5. That is amazing. It did take several attempts to fully load, but it's worth it.

    ReplyDelete
  6. "HTML5’s &ltaudio> and &ltvideo> tags"

    I think you forgot your semicolons in these HTML escapes.

    ReplyDelete
  7. Would be better if this worked in browsers other than just chrome.

    ReplyDelete
  8. I love it, I didn't have any problems loading

    ReplyDelete
  9. Worked great for me on a Mac. :-) Really neat Kaleidoscope effects.

    ReplyDelete
  10. Worked fine for me too. Great project. From such daftness comes really useful techniques, such as the video buffering.

    ReplyDelete
  11. Dear Scott,

    could U send me Keiko's email withe me. Thx

    kamilarr at gmail.com

    ReplyDelete
  12. How difficult is it to make something just load?

    ReplyDelete
  13. It dowesn't work in chrome 14 (windows), the people aren't show only the windows with the background

    ReplyDelete
  14. Never worked for me. Instead the project just showed the video in a small window (20x20?) against a black background. Running chrome 12.0.742.122 on Windows 7 x64

    ReplyDelete
  15. It is supperrr awesome!! i loved it :) \m/

    ReplyDelete
  16. incredible!! Is there a way to download the video or video message? Or maybe embed it in a presentation or something..?

    ReplyDelete