TEMPORARY WARNING: Please note the demo below is temporarily disabled due to my reaching the end of my Amazon S3 free tier. The interactive video requires fast hosting for the video, so hosting it on this WordPress webiste is too slow, the video stalls when navigated back and forth. The demo will be reactivated once I manage to sort out cheap fast hosting for the video. Many thanks for your understanding.
A Live demo is now available, with a temporary video (a mute version of the Ghost House video) and random scenes. The creative side still needs to be done, I need to find an appropriate concept to use this code with: probably a journey into someone’s mind as they take decisions, or a maze of some sort.
If you’re into that sort of things 😉 you can find the code on bitbucket and a brief technical explanation here: I overlayed a UI layer made with Angular views and router on top of a HTML5 video powered by Videogular. The UI layer controller retrieves the scene structure (with start and stop timings) from a JSON file via a custom service and displays custom UI for each scene offering the user to go to various other scenes. When the user clicks on a UI element, the router goes to another scene and the UI controller dispatches an event saying the scene has changed. The video controller catches the event, plays the video sequence associated to the new scene, and dispatch an event at the end of the sequence.