https://prayingmadness.github.io/killerloop

Clothing brand Killer Loop’s mission was to celebrate and supply a new generation of passionate authentic filmmakers and photographers – modern day adventurers if you will. Well, what better way to do this than with a ‘high-adrenalin, downhill bigfoot pursuit (on skis)?’ The idea behind this interactive film was to throw camera control over to the user during Bigfoot’s big stunt.

This project pushed HTML5 <video> in directions it was never supposed to go, integrating live camera-angle switching at one point in the video, allowing the user to choose which angle to view a stunt from. This was accomplished through a technique similar to a graphic sprite sheet, where all the camera angles were contained in one video file and “changing the camera angle” redirects the user to a new point in the video timeline. I’ve seen this used with audio files but, to the best of my knowledge, I’m the only developer in the history of the universe to attempt it with video. It resulted in a pretty long preloader since the entire video file needed to be loaded in order for timeline jumping to work accurately and smoothly, which introduced it’s own host of issues since every browser implements video preloading differently. Chrome, oddly, was the worst offender here and required a significant amount of hacking to force it into submission.

This was a project built in late 2013 for Minivegas. The live version of the project has been significantly changed by the client’s internal development team since my initial build went live, so a build of the project as it stood when I handed it off is available at prayingmadness.github.io/killerloop

Up until the site was handed off to the client and deployed live I was the sole developer on the project.

Important note: browsers have changed a lot in regards to autoplaying content since this was built and, as a result, the video might not start when you load it up. I’ve hacked in a Play button that should disappear when triggered – the scene-switching functionality requires media controls to be hidden – but it may not work as originally intended. I think it works best in Safari at the moment but no guarantees. You’ll have to take me on my word that it’s amazing. 😉