The JW Player is a very popular open-source media player which not only supports many video, audio and image formats, but has many scriptable behaviors. Here we’ll make use of the JavaScript API to generate as many players as you want on a page. The generated 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.

Article Outline

  • Call the swfObject script
  • Add placeholders for each player
  • Playlists
  • Call the init function
  • Add player-control scripts

    This is a new version of a script I wrote a while back that was compatible with an earlier version of the JW Player. This one has been updated to work with JW Player 4.7.761 and later.

    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.

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



    1. 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>
      


    2. 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.


    3. 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>
      

    4. 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>
      


    5. Call the init function

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

      <body onload="init();">
      


    6. 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>