The innovative features of the UC Davis Brewery, Winery, & Food facility resulted in LEED (Leadership in Energy and Environmental Design) Platinum status for the building project.
To showcase the steps taken to create this building, UC Davis Academic Technology Services staff Jeremy Cooke (media services), TJ Ushing (media services), and Simon Dvorak (programming) collaborated with Julianne Nola (UC Davis Design and Construction Management) and Jennifer Schill (US Green Building Council). With the goal of presenting a video tour of the facility, the group developed a custom video player with playlist support that utilizes Limelight/Delve Networks and jQuery to not only play videos in a channel, but also display related information and supporting materials for each video segment.
The player brings together professional quality video interviews, building photos, and technical documentation to present visitors with a complete view of this unique building.
Visit http://greenrmi.ucdavis.edu/bldg to view the complete tour. For more details on the video player, see the “Technical Details” section below.
When the page loads, a DelvePlayer object is instantiated with the id of a media Channel from Limelight. Once instantiated, the player object begins to listen for various events and performs actions based on those events. The following is a small sample of some of the custom events provided by the API and utilized in the custom player:
This event fires when a video thumbnail in the playlist has been clicked and the player then loads the selected video. When the video has finished loading, onMediaLoad reads the description and title of the video and stores them in variables for access by other functions.
Once a user clicks a thumbnail in the playlist, the media will load, and, if autostart turned on in the Limelight setting or the user clicks the play button, the video will begin to play triggering the onPlayheadUpdate event. In the current implementation, the media title and description are placed in their proper places within the page when this event fires.
Step 1: In the <head> section of the HTML page, link to the JQuery UI css file, JQuery and JQuery UI scripts provided by Google. We are using the files provided by Google for convenience sake. Local JQuery files are also acceptable.
<link href=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css” rel=”stylesheet” type=”text/css”/>
Step 2: Include the var.js, player.js script and css files.
<link rel=”stylesheet” href=”css/css.css” type=”text/css” media=”screen” title=”no title” charset=”utf-8″>
Step 3: In player.js, change the id variable on line 7 to the id of the desired Limelight media channel.
Step 4: Place a span element with a class of within the <body> element of the HTML page where you would like the tour to appear.
<span class=”LimelightEmbeddedPlayer”> </span>