source: javascript/branch/playlist-demo.html @ 321

Revision 321, 3.2 KB checked in by zach, 5 years ago (diff)

Importing JavaScript Playlist

Line 
1<html>
2<head>
3</head>
4<body>
5<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
6<script type="text/javascript" src="http://www.longtailvideo.com/jw/embed/swfobject.js"></script>
7<link href="playlist.css" rel="stylesheet" type="text/css">
8<script type="text/javascript" src="jquery.playlist.js"></script>
9<div id="player1" style="width:600px"></div>
10<script type="text/javascript">
11  var so = new SWFObject('http://player.longtailvideo.com/player.swf','ply1','320','240','9');
12  so.addParam('allowfullscreen','true');
13  so.addParam('allowscriptaccess','always');
14  so.addParam('flashvars','file=http://www.longtailvideo.com/jw/upload/mrss.xml&amp;image=http://developer.longtailvideo.com/player/testing/files/bunny.jpg&amp;title=FLV video&amp;height=240&amp;width=400');
15  so.write('player1');
16</script>
17<h2 id="introduction">Introduction</h2>
18<p>The JavaScript playlist for the JW Player is an easy to use alternative to the built in Flash playlist. It offers all of the same functionality as the built in playlist, and allows users to style its appearance via CSS.</p>
19<h2 id="installation">Installation</h2>
20<p>Setting up the JW Player's JavaScript playlist is fast and easy. Just follow these simple steps and you'll be up and running in no time!</p>
21<ol>
22<li>Download the following files and place them on your web server.
23<ul>
24<li><a href="jquery.playlist.js">jquery.playlist.js</a></li>
25<li><a href="playlist.css">playlist.css</a></li>
26<li><a href="jquery-1.3.2.min.js">jquery-1.3.2.min.js</a></li>
27</ul>
28</li>
29<li>Add* the following HTML to all pages that will use the JavaScript.</p>
30<pre>
31&lt;script type="text/javascript" src="http://www.mydomain.com/jwplaylist/jquery-1.3.2.min.js"&gt;&lt;/script&gt;
32&lt;script type="text/javascript" src="http://www.mydomain.com/jwplaylist/jquery.playlist.js"&gt;&lt;/script&gt;
33&lt;link rel="stylesheet" type="text/css" href="http://www.mydomain.com/jwplaylist/playlist.css" /&gt;
34</pre>
35<p>* We recommend placing this HTML in the <strong>&lt;head&gt;</strong> of your page, but any place before your first JW Player should be fine.</p>
36</li>
37</ol>
38<h2 id="configure">Stylizing the JavaScript Playlist</h2>
39<p>To stylize the JavaScript playlist, simply edit the included playlist.css. All of the elements and their default styles are listed.</p>
40<h2 id="structure">Structure of the JavaScript Playlist</h2>
41<p>This is the HTML structure of the JavaScript Playlist. It is provided for your reference when stylizing the controlbar.</p>
42<pre>
43&lt;div class="jw_playlist_playlist"&gt;
44        &lt;div class="jw_playlist_item even"&gt;
45                &lt;div class="jw_playlist_image_div"&gt;
46                        &lt;img class="jw_playlist_image" src="image.jpg"/&gt;
47                &lt;/div&gt;
48                &lt;div class="jw_playlist_title"&gt;&lt;/div&gt;
49                &lt;div class="jw_playlist_description"&gt;&lt;/div&gt;
50                &lt;div class="clear"/&gt;
51        &lt;/div&gt;
52        &lt;div class="jw_playlist_item odd"&gt;
53                &lt;div class="jw_playlist_image_div"&gt;
54                        &lt;img class="jw_playlist_image" src="image.jpg"/&gt;
55                &lt;/div&gt;
56                &lt;div class="jw_playlist_title"&gt;&lt;/div&gt;
57                &lt;div class="jw_playlist_description"&gt;&lt;/div&gt;
58                &lt;div class="clear"/&gt;
59        &lt;/div&gt;
60        ...
61&lt;/div&gt;
62</pre>
63</body>
64</html>
Note: See TracBrowser for help on using the repository browser.