> ia video

in general, i am not a huge fan of those interactive videos marketers come up with every once in a while. in my opinion an interactive video prevents you from getting into this feeling of "flow" most of us are familiar with from really good movies, and it lacks of interactive as known from immersive computer games. so its basically a mixture of two things similar like whisky cola. i like a good whisky sometimes and i like an ice cold cola sometimes, but summed up together, it just tastes wrong (at least imho). with this in mind, i was very happy when our lecturer (for interactive video) came up with an idea: manipulating video in real time, so that you as a spectator can give it a completely different meaning. after some interesting discussions, we came up with several conditions:

  • stories needed to be filmed on a greenscreen
  • the ability to live key within the browser
  • different background options for each scene
  • change the actor's costumes,
  • change the actor's voices,
  • change the background music.
  • and last but not least: change the ending

01 - sample screens

here you can see the layout of the interactive video page. on the right hand side are the possible settings. the two images, describe two different settings made at runtime. to make this possible, we used seriously.js for video effects, the p5 library for canvas effects, popcorn.js for jumping to specific points within the video, synchronize.js to synchronize all timelines (video+audio) and some other basic libraries like jquery.

interactive video - scene 1
interactive video - scene 2

> setting two: cartoony background, background-music with tension, soundtrack "crime", ending: wine, costumes: silly, effects: faint

02 - credits

it was a huge project, with many participants, so there's a huge thank you given here:


Red Riding Hood: Jette Rybak
Wolf: Sylvester Göttlicher


Silke Maier
Maren Neubrandt
Dimitri Reinhardt
Svenja Schindler
Julia Walter


Tanja Frehe
Nicole Hanus
Richarda Kraft
Hana Rude
Joey Schubert

Design & Development

Florian Börner
Daniel Hepperle (me)
Katrin Reich
Matthias Schnaider


Michael Dörfler


Nikolaus-Johann Wollnik
Musiker Joey