We were tasked with creating an application that will be running on a KIOSK displaying a series of videos that were extracted from the film Note by Note (winner of various international awards).
While brainstorming the different technologies that can be used to accomplish this, various options jumped out and made it to the whiteboard. Adobe Air, Cocoa application, etc. So, we went for the least complicated and clever option; a WEB APPLICATION.
HTML5, CSS, Safari, JavaScript and Plainview were the selected tools and technologies.
First, we started with the main html page using the HTML5 doctype in order to use the <video> tag. The site was styled with CSS and used JavaScript with the jQuery library to maximize the layout and video for use as a KIOSK. The video selection feature with the ability to scroll through a set of videos and to select and play each video was also coded with JavaScript and jQuery.
The video player was controlled by a separate JavaScript video object file. When initialized, the script would set the click event functions for the video selections, set various css and JavaScript variables for use throughout the video script, create an event listener for when the video ended, select and set the video source, show the title, and finally play the video.
The video source and titles were set in another JavaScript object, which was used to switch the videos easily when selected from the video selection feature, or when the event listener occurred after whichever video was playing ended, and move to the next video in the list.
Another feature was a popup dialog for a simple keypad that was used by the admins to close out the KIOSK web application, so they could use the computer normally. Normal patrons using the KIOSK would not know how to load the keypad and the code to close out the application. This made sure that the KIOSK was used as intended in public, and only with the web application.
Overall this was a fun and useful project where we can take what we learned and apply it to other web application projects.
