ATS Staff Collaborate to Design a Custom Video Player

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.

Technical Details

Although Delve Networks provides various video players for embedding in web pages, a custom solution provides much more flexibility in presentation and layout of the video content. In order to develop the custom video player, the Limelight Video Platform Player API was used, in addition to the jQuery JavaScript library.

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:

onChannelLoad
When the channel data has successfully loaded, the onChannelLoad is fired, which, in turn, builds the layout of the player using javascript to add elements and HTML to the page.  The playlist data and thumbnail URLs passed from Limelight are used to generate HTML that forms the playlist entries below the player.

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

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

Usage

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”/>

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js“></script>

<script src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js“></script>

Step 2: Include the var.js, player.js script and css files.

<script src=”script/vars.js” type=”text/javascript”></script>

<script src=”script/player.js” type=”text/javascript”></script>

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

Contact
For any questions or comments please contact:
Simon Dvorak
Academic Technology Services

530-754-7384
sidvorak@ucdavis.edu

Post Author: Mary Stewart

1 thought on “ATS Staff Collaborate to Design a Custom Video Player

    Ten AV

    (August 30, 2012 - 3:02 am)

    Nice post, really interesting

Leave a Reply

Your email address will not be published. Required fields are marked *