JW FLV player that switches playlists on the fly

Posted on October 3, 2009 by ellen

The JW FLV player is a versatile, customizable and scriptable flash video player, available from Longtailvideo.com. The player was recently upgraded, and many details in the scripting and playlists had to change to remain compatible. I’m posting examples of some of the players I’ve created lately, using the latest version of the player and SWFObject.

Versions

Player: JW FLV player 4.6

SWFObject: 2.1

Red5 Streaming server using RTMPT or RTMP

This is an example of a current-version player that changes playlists on the fly when you click a link or button.

I can’t show you a working demo because I don’t have an external Red5 server but here is how it looks. When the page loads, the player loads the first playlist.

When links in the navbar are clicked, the player loads other playlists.

Here’s the code. You can download the whole set of files, except for the videos, here: [ DOWNLOAD LINK ]

Example HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<!--http://www.longtailvideo.com/support/forum/Feature-Suggestions/2756/Multiple-playlists-a-Success-#msg109471--> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<!--/*v 1.5 12-11-2007*/--> 
<title>Player that swaps playlists on clicking link</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> 
<style> 
body { background-color:#000;} 
#subnav{ width:150px;} 
#subnav h2 {width:150px;height:20px;padding:3px 3px 6px 3px;background-color:#1277D4;font:12px bold Arial, Helvetica, sans-serif;color:#FFF;margin-bottom:2px;} 
div#subnav a,#subnav a:link,#subnav a:visited  {border-left:6px solid #1277D4;display:block;width:144px;background-color:#96C2ED;font:12px normal Arial, Helvetica, sans-serif;text-decoration:none;color:#000000;padding:3px 3px 6px 3px;margin-bottom:2px;}</style> 
<script type="text/javascript" src="js/swfobject/swfobject.js"></script> 
<script type="text/javascript"> 
var player=null; 
function gid(name) { return document.getElementById(name);   }; 
 
var flashvars = { 
fullscreen:           'true', 
resizing:             'true', 
playlistsize:         '300', 
width:                '307', 
height:               '288', 
backcolor:            '#111111', 
frontcolor:           '#999999', 
lightcolor:           '#66cc00', 
//lightcolor:            '#FFFFFF', 
playlist:             'right', 
repeat:               'none', 
shuffle:              'false', 
icons:                'false',  
bufferlength:         '1', 
autostart:            'false',  
stretching:           'fill', 
skin:                 'includes/mediaplayer4.5/modieus.swf', 
oncomplete:           'none', 
file:                 'http://yourwebserver.com/media/playlist1.xml', 
streamer:             'rtmpt://yourred5server.com:80/streams/' 
//, debug:                 'console' 
};  
var params ={ 
allowscriptaccess:    'always', 
allowfullscreen:      'true', 
bgcolor:              '#000000' 
}; 
var attributes ={ 
id:                   'player', 
name:                 'player' 
}; 
 
swfobject.embedSWF('includes/mediaplayer4.5/player4-6.swf', 'player', '607', '288', '9.0.124', false, flashvars, params, attributes); 
function loadFile(theFile){   player.sendEvent('LOAD',theFile); }; 
</script> 
 
 
</head> 
<body> 
 
 
 
<!--*********************put content below this line!!!!************--> 
<table width="100%" border="0" id="contenTable" style="background:#000;"> 
<tr> 
<td  valign="top" class="col1" colspan="2" ><h1>Click links to swap playlists</h1></td>  
</tr> 
<tr> 
<td valign="top" class="col1" width="170"> 
<div id="subnav"> 
<h2>By task:</h2> 
<a href="javascript:loadFile('media/playlist-test.xml')">Playlist Test</a> 
<a href="javascript:loadFile('media/playlist2.xml')">Playlist Test 2</a> 
<a href="javascript:loadFile('media/playlist1.xml')">How to (some task)</a> 
<h2>Patient population:</h2>  
<a href="javascript:loadFile('media/playlist2.xml')">Bariatric</a> 
<a href="javascript:loadFile('media/playlist1.xml')">Pediatric</a> 
<h2>Type of Equipment:</h2>  
<a href="javascript:loadFile('media/playlist2.xml')">Brand 1</a> 
<a href="javascript:loadFile('media/playlist1.xml')">Brand 2</a> 
</div> 
</td> 
<td  valign="top"> 
<a id="player" name="player" class="player" href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">Get the Adobe Flash Player to see this video.</a> 
</td> 
</tr> 

</table> 
  
<script type="text/javascript"> 
function playerReady(obj) { player = gid(obj.id); }; 
function gid(name) { return document.getElementById(name); }; 
</script> 
 
</body> 
</html>

Example Playlist

<?xml version="1.0" encoding="utf-8" ?> 
  <playlist version="1" xmlns="http://xspf.org/ns/0/" > 
  <trackList> 
  <track> 
  <title>Video02 - Playlist 1</title> 
  <creator>author or other info here</creator> 
  <annotation>Short description goes here  </annotation> 
  <location>vid02.flv</location> 
  <type>rtmp</type> 
  <image>media/vid02.jpg</image> 
  <meta rel="start">0</meta> 
  <meta rel="duration">205</meta> 
  <meta rel="tags">tag1,tag2,tag3</meta> 
  </track> 
  <track> 
  <title>Video03 - Playlist 1</title> 
  <creator>author or other info here</creator> 
  <annotation>Short description goes here  </annotation> 
  <location>vid03.flv</location> 
  <type>rtmp</type> 
  <image>media/vid03.jpg</image> 
  <meta rel="start">0</meta> 
  <meta rel="duration">36</meta> 
  <meta rel="tags">tag1,tag2,tag3</meta> 
  </track> 
  <track> 
  <title>Video04 - Playlist 1</title> 
  <creator>author or other info here</creator> 
  <annotation>Short description goes here here's another line </annotation> 
  <location>vid04.flv</location> 
  <type>rtmp</type> 
  <image>media/vid04.jpg</image> 
  <meta rel="start">0</meta> 
  <meta rel="duration">108</meta> 
  <meta rel="tags">tag1,tag2,tag3</meta> 
  </track> 
  <track> 
  <title>Video05 - Playlist 1</title> 
  <creator>author or other info here</creator> 
  <annotation>Short description goes here  </annotation> 
  <location>vid05.flv</location> 
  <type>rtmp</type> 
  <image>media/vid05.jpg</image> 
  <meta rel="start">0</meta> 
  <meta rel="duration">140</meta> 
  <meta rel="tags">tag1,tag2,tag3</meta> 
  </track> 
  <track> 
  <title>Video06</title> 
  <creator>author or other info here</creator> 
  <annotation>Should be able to put a multi line description here. 2Should be able to put a multi line description here. 3Should be able to put a multi line description here. 4Should be able to put a multi line description here.  </annotation> 
  <location>vid06.flv</location> 
  <type>rtmp</type> 
  <image>media/vid06.jpg</image> 
  <meta rel="start">0</meta> 
  <meta rel="duration">130</meta> 
  </track> 
  <track> 
  <title>Video100</title> 
  <creator>author or other info here</creator> 
  <annotation>Should be able to put a multi line description here. 2Should be able to put a multi line description here. 3Should be able to put a multi line description here. 4Should be able to put a multi line description here.  </annotation> 
  <location>vid100.flv</location> 
  <type>rtmp</type> 
  <image>media/vid100.jpg</image> 
  <meta rel="start">0</meta> 
  <meta rel="duration">130</meta> 
  </track> 
  </trackList>  
  </playlist>

Forum discussion on players with multiple playlists

JW FLV player that switches playlists on the fly

Leave a Reply Cancel reply

Categories

My Scarves on Etsy