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

October 03, 2009

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.

More after the jump...

Ads by Google

Posted by ellen at October 03, 2009 11:49 AM

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>