ABBY's recent music video, Evelyn, was created in HTML5 to support an interactive experience. As the band plays, you can select one of three paths for each musician, and switch them around in real-time to see what unfolds. The interactive version of the video can be found at http://evelyn-interactive.searchingforabby.com/
Steffen Bewersdorff and Dominik Tranklein are the developers who created the video. Their web agency, Bleech, based in Berlin, Germany, focuses on providing innovative services to music and media industry clients. (More information about the nuts and bolts of the development process can be found in a post on the Web Designer Depot site: "An awesome HTML5 interactive music video".)
Note: The interactive musical video performance requires a fast computer. You'll need a browser that has extended HTML5 support, such as a Safari browser if you have a Mac, or a Chrome browser if you are using Windows. Be sure to close your running applications, and enjoy creating/playing with the band!
Below is the non-interactive version of the video, which provides a walk-through of one possible interactive musical experience:
UPDATE: I used this interactive video, displayed on a SMARTBoard, with students who have special needs, in several classrooms, and it was a great hit. They especially liked the drummer. For some reason, we couldn't get the fifth section to show a musician. The students didn't mind.
RELATED/SOMEWHAT RELATED
The Wilderness Downtown (Arcade Fire, Chris Milk)
OK Go's Interactive HTML5 Music/Dance/Message Video, Featuring Pilobolus
ROME: "3 Dreams of Black" An Interactive Film by Chris Milk, Music by Danger Mouse, Daniele Luppi & Norah Jones
ROME: "3 Dreams of Black" The Technology
Creating Responsive HTML5 Touch Interfaces (Stephen Woods)
Popcornjs.org (open source HTML5 media framework)
Web goes pop: HTML5 is rejuvenating music videos online
Madhumita Venkataramanan, Wired UK
Behind the Scenes: The Interactive Music Video Game built in HTML5 (MSDN - includes link to code samples, including a frame code reader to sync video and interactive elements.)
Steffen Bewersdorff and Dominik Tranklein are the developers who created the video. Their web agency, Bleech, based in Berlin, Germany, focuses on providing innovative services to music and media industry clients. (More information about the nuts and bolts of the development process can be found in a post on the Web Designer Depot site: "An awesome HTML5 interactive music video".)
Note: The interactive musical video performance requires a fast computer. You'll need a browser that has extended HTML5 support, such as a Safari browser if you have a Mac, or a Chrome browser if you are using Windows. Be sure to close your running applications, and enjoy creating/playing with the band!
Below is the non-interactive version of the video, which provides a walk-through of one possible interactive musical experience:
UPDATE: I used this interactive video, displayed on a SMARTBoard, with students who have special needs, in several classrooms, and it was a great hit. They especially liked the drummer. For some reason, we couldn't get the fifth section to show a musician. The students didn't mind.
RELATED/SOMEWHAT RELATED
The Wilderness Downtown (Arcade Fire, Chris Milk)
OK Go's Interactive HTML5 Music/Dance/Message Video, Featuring Pilobolus
ROME: "3 Dreams of Black" An Interactive Film by Chris Milk, Music by Danger Mouse, Daniele Luppi & Norah Jones
ROME: "3 Dreams of Black" The Technology
Creating Responsive HTML5 Touch Interfaces (Stephen Woods)
Popcornjs.org (open source HTML5 media framework)
Web goes pop: HTML5 is rejuvenating music videos online
Madhumita Venkataramanan, Wired UK
Behind the Scenes: The Interactive Music Video Game built in HTML5 (MSDN - includes link to code samples, including a frame code reader to sync video and interactive elements.)
Comment Policy : Lorem ipsum dolor sit amet, saepe gubergren sed id, et est posse insolens temporibus, alterum blandit offendit est et. Quando vocibus nam at. Quo malis detraxit ut, eu nulla decore mentitum, eu ferri postulant urbanitas pri. Nihil consul viderer vel ea, vel doctus accusamus gloriatur ut. Elitr iuvaret.