JW FLV player 4.6: Two or more players on a page

Posted on by

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. Since it can be difficult to figure out the details of the necessary changes, 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 how to put two or more JW FLV players on a page, side by side. I can’t show you a working demo because I don’t have an external Red5 server but here is how it looks.

Picture 35.jpg
Example HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <TITLE>Two video players, side by side.</TITLE>
  

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


 <script type="text/javascript">


 var flashvars =
  {
  fullscreen:           'true',
  resizing:             'true',
  playlistsize:         '0',
  backcolor:            '#000000',
  frontcolor:           '#999999',
  playlist:             'right',
  repeat:               'none',
  shuffle:              'false',
  icons:                'false', 
  bufferlength:         '1',
  autostart:            'false', 
  stretching:           'uniform',
  streamer:             'rtmpt://yourRed5server.com:80/streams/',
  file:                 'media/playlist2.xml'
  }; 
  
  var flashvars2 =
  {
  fullscreen:           'true',
  resizing:             'true',
  playlistsize:         '0',
  backcolor:            '#000000',
  frontcolor:           '#999999',
  playlist:             'right',
  repeat:               'none',
  shuffle:              'false',
  icons:                'false', 
  bufferlength:         '1',
  autostart:            'false', 
  stretching:           'uniform',
  streamer:             'rtmpt://yourRed5server.com:80/streams/',
  file:                 'media/playlist2b.xml'
  
  }; 
  var params =
  {
  allowscriptaccess:    'always',
  allowfullscreen:      'true',
  bgcolor:              '#000000'
  };
  var params2 =
  {
  allowscriptaccess:    'always',
  allowfullscreen:      'true',
  bgcolor:              '#000000'
  };
  var attributes =
  {
  id:                   'player',
  name:                 'player'
  };
  
  var attributes2 =
  {
  id:                   'player2',
  name:                 'player2'
  };
  
  swfobject.embedSWF('includes/jw_media_player/player.swf', 'player', '320', '240', '9.0.124', false, flashvars, params, attributes);
  swfobject.embedSWF('includes/jw_media_player/player.swf', 'player2', '320', '240', '9.0.124', false, flashvars2, params2, attributes2);


// -->
  </SCRIPT>



</head>
  <body>


 
    
  <div id="rightColumn">
  
  <div id="content">


 <table width="50%" border="0" id="contenTable">
  <tr>
  <td colspan="2" valign="top"><h1>Videos</h1>      </td> 
  </tr>
  <tr>
  <td valign="top">Forklift Safety: Best Operating Practices (13:51) </td>
  <td width="50%" valign="top">Forklift Walk Behinds (4:46)         </td>
  </tr>
  <tr>
  <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>
  <td width="50%" valign="top">
  <a id="player2" name="player2" 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>
  <tr>
  <td colspan="2" valign="top"><hr width="100%" noshade="noshade" /></td>
  </tr>
  <tr>
  <td width="50%" valign="top"><h6>&nbsp;</h6></td>
  <td width="50%" valign="top"><div align="right">
  <h6>&nbsp;</h6>
  </div></td>
  </tr>
  </table>
  </div><!--end content-->
  </div><!--end rightColumn-->
  
  </div>
  
  </body>
  </html>

playlist2.xml

<?xml version="1.0" encoding="utf-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
<trackList>
<track>
<title>Forklift Best Practices</title>
<creator>author or other info here</creator>
<annotation>Short description goes here  </annotation>
<location>Operating_Practices.flv</location>
<type>rtmpt</type>
<image>media/forkliftBestPractices.jpg</image>
<meta rel="start">0</meta>
<meta rel="duration">724</meta>
<meta rel="tags">tag1,tag2,tag3</meta>
</track>
</trackList>
</playlist>

playlist2b.xml

<?xml version="1.0" encoding="utf-8"?>
  <playlist version="1" xmlns="http://xspf.org/ns/0/">
  <trackList>
  <track>
  <title>Forklift Walk Behinds</title>
  <creator>author or other info here</creator>
  <annotation>Short description goes here  </annotation>
  <location>forkliftWalkBehinds.flv</location>
  <type>rtmpt</type>
  <image>media/forkliftWalkBehinds.jpg</image>
  <meta rel="start">0</meta>
  <meta rel="duration">285</meta>
  <meta rel="tags">tag1,tag2,tag3</meta>
  </track>
  </trackList>
  </playlist>