OK Go play with HTML5
July 27th, 2011 | Published in Google Code
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