The idea behind this project was to augment video with additional information and to provide the viewer with a level of interaction without significantly distracting from the main content.
We provide two viewing modes. The default mode allows you to scroll through panels of extra information and use them to navigate and share. Large-screen mode allows you to experience the video in a more traditional manner, periodically overlaying additional info in the corner of the screen.
The viewer can alter the quality of the video feed to suit their device and bandwidth requirements.
Ideas for future implementations include the use of word accurate hyperlinked transcripts, full support for mobile devices and second-screen synchronisation.
We're just experimenting. We'd love to hear your thoughts on what we have implemented so far and any ideas you may have to improve the experience as we iterate.
This project was created as part of the Knight-Mozilla Open News initiative. All code is free, open-source and suitably licensed.
This project comprises of entirely client-side code. That is to say code that runs in the browser. This means less stress on the server but more importantly that you can deploy, run and alter simply on a server of your choice. The only tool required is a text editor.
We use HTML, JavaScript and CSS, with these three elements we can control design, function and behaviour in multiple browsers and on multiple devices.
Inspired by others - we use and build upon open libraries made freely available. Where possible, we contribute back to these projects in an attempt to keep the open and free eco-system thriving.
Libraries we used include jQuery, jPlayer, grab.js, Popcorn.js, Tabletop.js and add2home.js.
This is demo-land we're just plugging bits together like Lego and iterating as fast as we can. We'll do the optimisation later.
Ideas for future implementations include the use of word accurate hyperlinked transcripts, full support for mobile devices and second-screen synchronisation.
