NOTE: this has been revised to make it more flexible, and allow multiple streamers and multiple video types, using the same code.

This is a script that allows you to add as many JW FLV players to a page as you want, using a single block of code. The players all have separate event listeners to keep them from interfering with each other. Events or actions executed in one player do not affect others.

This particular demo also corrects for a problem we have noticed recently with Red5, where RTMP streams will hang with a “BUFFER.EMPTY” status code. I’ve set up meta-monitoring so that it catches “BUFFER.EMPTY” codes and starts the player up again a little bit previous to the break. It creates player names and function names dynamically, based on how many players you request. If this function seems to be giving you problems, if your videos start jumping back and restarting a lot, search for the following line and comment it out by adding “//” in front of it:

window["player_"+obj.id].sendEvent('SEEK', parseInt(window["positionarray_"+obj.id][3])+100);

We’ve also had problems with some videos that simply refuse to stream, although they will play using progressive download. You can use a mixture of streaming and non-streaming by altering the playlist for each video.

Screen shot 2009-10-30 at 5.44.32 PM.jpg



Instructions

In the head of the document, add and alter this line to point to your copy of swfobject.js


<script src="swfobject2.1.js" type="text/javascript"></script>

In the body of the document, add this placeholder code wherever you want players to appear. Name them “placeholder001, placeholder002, placeholder003, placeholder004”, etc for as many players as you need. Number them in order – do not skip any numbers. Start with 001. Every placeholder must have a unique name.


<div id="placeholder001"></div>

Make an xspf playlist for each player called “playlist1_1, playlist1_2, playlist1_3” etc. The number that comes right after the word “playlist” represents the page (in case you are making multiple pages with multiple players on them), and the number that comes after the underscore represents which player out of all the players on that particular page. So player 5 on page 1 would be “playlist1_5”.

<?xml version="1.0" encoding="utf-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
<trackList>
<track>
<title>Video Title goes here</title>
<creator>50-75</creator>
<annotation>Proper Use</annotation>
<location>chloraprep.flv</location>
<type>rtmp</type>
<image>media/Poster.jpg</image>
<meta rel="start">0</meta>
<meta rel="duration">1553</meta>
<meta rel="tags">tag1,tag2,tag3</meta>
<meta rel="streamer">rtmpt://yourstreamingserver.com:80/oflaDemo/topicfolder/</meta>
</track>
</trackList>
</playlist>

Add a call to the init() function to the body tag:


<body onload="init();">

If one or more of your videos do not stream well for some reason you can alter the playlist to use a blank “streamer” and type “video” instead of type “rmpt”, so that it will be a progressive download file. Note that if you do this your server must be set up to correctly serve FLV files (see this technote for more information).

<?xml version="1.0" encoding="utf-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
<trackList>
<track>
<title>Video Title</title>
<creator>place holder</creator>
<annotation>Placeholder</annotation>
<location>http://yourwebserver.com/pathto/yourfile/videofilename.flv</location>
<type>video</type>
<image>media/Poster.jpg</image>
<meta rel="start">0</meta>
<meta rel="duration">913</meta>
<meta rel="tags">tag1,tag2,tag3</meta>
<meta rel="streamer"> </meta>
</track>
</trackList>
</playlist>

Add this script just before the closing </HEAD> tag. Change the settings and width and height of the player (see red text)

 <script type="text/javascript">
  var playerscount = 2; //how many players do you want?
  var page = 12;//give it a unique number to distinguish these players from players on other pages.

/* ********set these settings appropriately for all the players ****** */ var positionarray = new Array("","","","",""); function createPlayer(thePlaceholder,thePlayerId,theStreamer, theFile, theAutostart) { var flashvars = { streamer:theStreamer, file:theFile, autostart:theAutostart, repeat:'none', shuffle:'false', volume:'50', icons:'none', playlist:'none', debug:'console', bufferlength:5 } var params = { allowfullscreen:"true", allowscriptaccess:"always" } var attributes = { id:thePlayerId, name:thePlayerId } swfobject.embedSWF("includes/jw_media_player/player-licensed.swf", thePlaceholder, "350", "282", "9.0.115", false, flashvars, params, attributes); //alert('thePlaceholder'+thePlaceholder+'n thePlayerId= '+thePlayerId+'n theStreamer= '+theStreamer+ 'ntheFile= '+ theFile + 'ntheAutostart= '+theAutostart); }//end function createPlayer

/* ********don't touch anything below this line. ****** */ function init2() { for (var i=1; i<=playerscount; i++) { createPlayer("placeholder00"+i, "player"+i, "", "media/playlist"+page+"_"+i+".xml", false ); window["player_player"+i] = window.document.getElementById("player"+i); //dynamic variable names using window[] } }; function playerReady(obj) { for (var i=1; i<=playerscount; i++) { var tm = 'window["timeMonitor"+i]'; var mm = 'window["metaMonitor"+i]'; window["player_"+obj.id].addModelListener('TIME', 'tm'); window["player_"+obj.id].addModelListener('META', 'mm'); window["positionarray_"+obj.id]=new Array("","","","",""); // alert('obj.id='+obj.id); } };

function tm(obj) //dynamic function names using window[] { console.info(window["positionarray_"+obj.id]); window["positionarray_"+obj.id].push(obj.position); window["positionarray_"+obj.id].shift(); if((obj.position > 0) && (seekFlag)) { seekFlag = false; window["player"+obj.id].sendEvent('SEEK', seekto); } window['currentTime'+obj.id] = obj.position; }; function mm(obj) { //alert('in metaMonitor'); window['currentCode_'+obj.id] =obj.code; //alert( obj.id +obj.position); // if (window['currentCode_'+obj.id]=='NetStream.Buffer.Empty'){ //alert('player_'+obj.id+' is at buffer.empty'+window.positionArray[3]); //alert(parseInt(window["positionarray_"+obj.id][3])); window["player_"+obj.id].sendEvent('SEEK', parseInt(window["positionarray_"+obj.id][3])+100); //bugfix for red5 bug - under testing. //window["player_"+obj.id].sendEvent('STOP'); // window["player_"+obj.id].sendEvent('PLAY', 'true'); } } function gid(name) { return document.getElementById(name); }; </script>