MA project: The first steps of coding interactivity

One of the elements of the artefact I am producing within my MA by Practice project is a layer of interactivity. It is my intention to allow the viewer an opportunity to view additional content from within the video player – whether it be a photograph, or the extended clip from an interview.

In order to do this, I have started to code a video player. So far, using CodePen, I have created a video window with two additional sources overlaid on top. These additional sources are a second and third video.

Videos 1 and 2, at the moment, have been sourced from previously uploaded content that are irrelevant to my artefact. While I have not yet edited the video content for my artefact, I’ve needed some content to test my code with. The source for video 3 has so far been left blank, so that I could test an idea that I have been considering for use in my project. In order to exemplify online security, I had thought about showing a preview of the viewer’s webcam within the video frame in addition to showing browser name and location. As most internet users expect browser name and location to be sourced from a website, the webcam feed was an idea to make an personal and emotional connection with the viewer.

Experimental code to allow access to webcam preview within main video window.

One thing that was important in creating such code, was that the webcam preview should not be uploaded to the web, and so the JavaScript used is designed to only show the preview of the webcam within the browser. It is also worth noting that the preview will only work if the viewer accepts a browser-popup asking for permission for the webpage to use the webcam, or if the browser security settings would already allow it. The feature will not work on browsers that do not allow this access.

There is still a long way to go in producing the overall code; one thing I am struggling to test successfully is the ability to pause the primary video while a second overlaying video plays. So far, different variations on the code haven’t worked at all, and so a lot more research time is being spent finding other solutions. This means that the time I had initially planned to spend on testing a time element (where the overlaying video only appears after a set time, and disappears if not played) has been put on hold. I may find that I do not have sufficient time to create certain interaction types if I can’t get these basic functions to work.

The code I am currently working on, in CodePen, can be viewed here. Please keep in mind that this is a live code, and may change at any moment.