live interactive video, Autotel

Autotel

live interactive video

awarenesstest

Unity approach

I was asked if it is possible to make a video interactive by placing a link that would follow elements. My first approach to this problem was to create a unity micro-game that displays the object in question, and a unity interactive element would follow the object by projecting it’s position into the screen. Unity when embedded in a webpage, can trigger JavaScript events.

unity_interactive_shot

This approach was good in terms of allowing interaction between the 3-dimensional object and the user, but was not so good in terms of cross-browser compatibility; given that unity plugin seemingly was implemented pretty late, and then deprecated in chrome.

JavaScript interactive video

The second and more successful approach was based on the JavaScript Popcorn media framework. I used the Popcorn Base plugin, to hard sync the video position to JavaScript timing. In order to make a DOM element to follow a video element, I created a sort of editor mode, where for (nearly) each frame of the video, you can point the position where you need the DOM element to be. This stores each position into an array whose index depends on the time position of the video. When in “user” mode, the script starts positioning the DOM element in each of the saved coordinates.

The moving element will start moving, as I only programmed the movements for the first part of the video.


video source: https://www.youtube.com/watch?v=Ahg6qcgoay4

This example is not yet polished: the edition mode is hard to use and understand, and the relation between video frames and JavaScript frames is not even (there may be around 1.6 JavaScript frames per video frame). Plus, the frame by frame animation result is not as smooth as it could be. It needs a mean of interpolation to smoothen the movement of the DOM element. Also, this code in this state will not survive resizing: it would need the implementation of a size-related scaling of the coordinates so it is more responsive. It was made to answer the question in order to get a job, that apparently I didn’t; but if you need this better developed, I could help.

 

Tags: , , , , , , ,

Leave a Reply