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
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.
Ads by Google
Posted by ellen at October 03, 2009 11:50 AM
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>
Ads by Google
