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.
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.