Ads by Google
Posted by ellen at May 24, 2010 05:03 PM What's new in this version of the script?
- Removed the buffer-monitoring that used to be in this from this since LongTail video fixed the Red5 buffering problem in version 4.7. The version used here if 4.7.761.
- Playlist now uses the JW player namespace to improve functionality of duration settings. Starting and stopping in the middle of a video now work better.
- Captioning also works better.
Call the swfobject script
In the head of the document, add this line:<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
Add placeholders for each player
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.<div id="placeholder001"></div>
Important:- Number them in order starting with 001. Do not skip any numbers.
- Every placeholder must have a unique name.
Playlists
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".
RTMP/RTMPT player example (we use this for red5 streaming). Not that the provider is listed as "rtmp" but the streamer URL begins with rtmpt. The provider for both RTMP and RTMPT streaming is rtmp. Be careful not to leave out the line marked in red. Without it, the jwplayer tags will not validate.<?xml version="1.0" encoding="utf-8"?> <playlist xmlns="http://xspf.org/ns/0/" xmlns:jwplayer="http://developer.longtailvideo.com/trac/wiki/FlashFormats" version="1"> <trackList> <track> <jwplayer:title>Streaming Flash Video item</jwplayer:title> <jwplayer:description>This item is being streamed with RTMPT from a red5 server through a firewall over port 80</jwplayer:description> <jwplayer:streamer>rtmpt://our.red5.server.com:80/oflaDemo/</jwplayer:streamer> <jwplayer:provider>rtmp</jwplayer:provider> <jwplayer:file>topic directory/myStreamingFlashVideo.flv</jwplayer:file> <jwplayer:start>33</jwplayer:start> <jwplayer:duration>54</jwplayer:duration> <jwplayer:captions.file>media/captions/myStreamingFlashVideoCaptionsFile.xml</jwplayer:captions.file> <jwplayer:image>media/Poster.jpg</jwplayer:image> </track> </trackList> </playlist>Playlist for progressive download videos
<?xml version="1.0" encoding="utf-8"?> <playlist xmlns="http://xspf.org/ns/0/" xmlns:jwplayer="http://developer.longtailvideo.com/trac/wiki/FlashFormats" version="1"> <trackList> <track> <jwplayer:title>Progressive Download Item</jwplayer:title> <jwplayer:description>Description goes here</jwplayer:description> <jwplayer:provider>video</jwplayer:provider> <jwplayer:file>media/progressiveDownload.flv</jwplayer:file> <jwplayer:start>0</jwplayer:start> <jwplayer:duration>54</jwplayer:duration> <jwplayer:captions.file>media/captions/progressiveDownloadCaptions.xml</jwplayer:captions.file> <jwplayer:image>media/Poster.jpg</jwplayer:image> </track> </trackList> </playlist>Call the init function
Add a call to the init() function to the body tag:
<body onload="init();">
Add player-control scripts
Add this script just before the closing tag. Change the settings and width and height of the player (see red text)<script type="text/javascript"> var playerscount = 4; //how many players do you want? var page = 14;//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: "rtmpt://yourstreamingserver.com:80/oflaDemo/topicfolder/", file: theFile, autostart: theAutostart, repeat: 'none', shuffle: 'false', volume: '50', icons: 'false', playlist: 'none', debug: 'console', bufferlength: '1' } var params = { allowfullscreen:"true", allowscriptaccess:"always" } var attributes = { id:thePlayerId, name:thePlayerId } swfobject.embedSWF('includes/jw_media_player/player.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'); } }; function tm(obj) { //alert('in timeMonitor'); //can add custom functions here }; function mm(obj) { //alert('in metaMonitor'); //can add custom functions here } function gid(name) { return document.getElementById(name); }; </script>
