Order Now AdSolution Sign Up | Login » Bits on the Run Sign Up | Login »

Creating a JavaScript Playlist

NOTE: This document has been deprecated and is applicable to JW Player Versions 5.0, 5.1, and 5.2 only.

 

 



The JavaScript playlist for the JW Player is an easy-to-use alternative to the built-in Flash playlist. While the JavaScript playlist offers all of the same functionality as the Flash playlist, styling its appearance is much easier and less time consuming, as it requires only basic knowledge of CSS. This tutorial will show you how to:

Step 1: Install the JavaScript Playlist

  1. Download the following files and place them on your web server.
  2. Add the following HTML code to all pages that will use the JavaScript.

     

    We recommend placing these lines of HTML code in the <head> of your page, but any place before your first JW Player reference should be fine.

    <script type="text/javascript" src="http://www.mydomain.com/jwplaylist/jquery.js"></script>
<script type="text/javascript" src="http://www.mydomain.com/jwplaylist/jquery.playlist.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.mydomain.com/jwplaylist/playlist.css" />

Step 2: Style the JavaScript Playlist

The JavaScript playlist provides you with great flexibility in the cusomization of its appearance.  You have full control over the playlist itself, as well as the image, title and colors.  To stylize the JavaScript playlist, edit the playlist.css stylesheet. All of the elements and their default styles are listed below.

object , embed{
	float: left;
}

.jw_playlist_playlist {
	float:left;
	width: 280px;
	height: 240px;
	overflow-y: auto;
	overflow-x: hidden;
	<!--[if gte IE 6]>float:right;<![endif]-->
}

.jw_playlist_image {
	width: 75px;
	height: auto;
}

.jw_playlist_image_div {
	border: 1px solid #000000;
	padding: 0 5px;
	margin: 0 5px;
	float:left;
	background-color:white;
}

.jw_playlist_item {
	padding:10px 20px;
}

.clear {
	clear:both;
	height: 0;
}

.jw_playlist_title {
	font-weight: bold;
}

.jw_playlist_description {
}

.even {
	background-color: #EEEEEE;
}

.odd {
	background-color: #FFFFFF;
}

.playing {
	background-color:yellow;
}

Step 3: Understand the Structure of the JavaScript Playlist

This is the HTML structure of the JavaScript playlist. Even though you are making use of JavaScript to create and layout your playlist you still must provide a playlist XML file to the player.  The XML file is necessary as it tells the player where your media is actually located and the JavaScript generates the HTML dynamically based on its contents.  For more information on creating a playlist XML file please refer to Create a Playlist with the JW Player. 

Below is the HTML generated by the provided JavaScript files  Use it as a reference when stylizing the ControlBar.

<div class="jw_playlist_playlist">
	<div class="jw_playlist_item even">
		<div class="jw_playlist_image_div">
			<img class="jw_playlist_image" src="image.jpg"/>
		</div>
		<div class="jw_playlist_title"></div>
		<div class="jw_playlist_description"></div>
		<div class="clear"/>
	</div>
	<div class="jw_playlist_item odd">
		<div class="jw_playlist_image_div">
			<img class="jw_playlist_image" src="image.jpg"/>
		</div>
		<div class="jw_playlist_title"></div>
		<div class="jw_playlist_description"></div>
		<div class="clear"/>
	</div>
	...
</div>