Above: You can see a screenshot of two full page videos playing simultaneously on top of each other, I embedded them in a web page, which I coded from scratch. The videos autoplay when the web page loads and top video has its opacity set to fifty percent (or 0.5), which means you can see the video playing underneath, whilst still seeing the video playing over the top. The videos are responsive inside the web page and remain full screen when the browser window is scaled up or down. This is a great step because our final web-based documentary experience will be a web page with two full page responsive videos, so by making this prototype, it shows that the basic functionality of our website is achievable. The next step is to work out the interactivity element so the user can easily and intuitively navigate seamlessly back and forth between the two videos, by controlling the opacity of the top video on a drag and click. Check out the live version here!
Above: You can see two screenshots that show the process of my development of the homepage for ‘The Parallel’ interactive and immersive web-based video experience. I wanted the homepage to be very simplistic and minimal in its design, with no buttons or menus, just the two slashes, which is the icon and logo system we’re using for the project. But also the pragmatic reason behind not having anything else on the web page to distract the user, encourages users to click on the icon as a button. I wanted them to get some feedback when they rolled their cursor over the icon, so I used a HTML’onmouseover’ commandand selected the image of the slashes icon with the images inside, one slash being an image of Bristol and the other slash an image of war-torn Syria, I think this cursor rollover change will encourage the user to click the button to take them to the main video. I also like the idea that there is a home page acting as a holding page, and the user has to click to enter the experience, because I feel it adds an element of excitement and suspense for the user, as oppose to the main video experiencing beginning when you load up the page. Check out the live version here!