Return to Snippet

Revision: 11973
at February 25, 2009 20:24 by Bluewall


Initial Code
<!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 Playlists plus One Media Player (3 Players) - JWMP v4.4.x - swfobject v2.2</title>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

    <style type="text/css">
      div.playercontainer1
      {
        position:          absolute;
        top:                  100px;
        left:                 600px;
        width:                320px;
        height:               280px;
      }

      div.playercontainer2
      {
        position:          absolute;
        top:                  100px;
        left:                 280px;
        width:                320px;
        height:               460px;
      }

      div.playercontainer3
      {
        position:          absolute;
        top:                  380px;
        left:                 600px;
        width:                320px;
        height:               180px;
      }
    </style>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script>

      <script type="text/javascript">
      var player1           =  null;
      var player2           =  null;
      var player3           =  null;
      var playlist2Length   =  null;
      var selectFlag        =  true;
      var instrumentation   = false;


      function playerReady(obj)
      {
        window['player' + obj.id.substr((obj.id.length -1), 1)] = gid(obj.id);

        if((typeof player1 == 'object') && (typeof player2 == 'object') && (typeof player3 == 'object'))
        {
if(instrumentation)
{
  gid('players1').innerHTML = 'Player1: ' + player1.id + '<br />Player2: ' + player2.id + '<br />Player3: ' + player3.id;
}
          addListeners();
        }
      };


      function addListeners()
      {
if(instrumentation)
{
  gid('players2').innerHTML = '<br />Player1: ' + typeof player1.getPlaylist() + '<br />Player2: ' + typeof player2.getPlaylist() + '<br />Player3: ' + typeof player3.getPlaylist();
}
        if((typeof player1.getPlaylist() == 'object') && (typeof player2.getPlaylist() == 'object') && (typeof player3.getPlaylist() == 'object'))
        {
          var playlist2    = player2.getPlaylist();
          var playlist3    = player3.getPlaylist();
          playlist2Length  = playlist2.length;
          var playlist1    = playlist2.concat(playlist3);
          player1.sendEvent('LOAD', playlist1);
if(instrumentation)
{
  gid('playlists').innerHTML = '<br />Playlist 1: ' + playlist1.length + '<br />Playlist 2: ' + playlist2.length + '<br />Playlist 3: ' + playlist3.length;
}
          player1.addControllerListener('ITEM',     'itemMonitor');
          player2.addControllerListener('ITEM',     'itemMonitor');
          player3.addControllerListener('ITEM',     'itemMonitor');
          player1.addControllerListener('PLAYLIST', 'playlistMonitor');

          player1.sendEvent('LOAD', playlist1);
        }
        else
        {
alert('Try Again');
          setTimeout("addListeners()", 100);
        }
      };


      function itemMonitor(obj)
      {
if(instrumentation)
{
  gid('selection').innerHTML = '<br />Selection:<br />obj.id: ' + obj.id + '<br />index: ' + obj.index + '<br />selectFlag: ' + selectFlag;
}
        if(obj.id == 'player1')
        {
if(instrumentation)
{
  gid('selection1').innerHTML = '<br />Selection1:<br />obj.id: ' + obj.id + '<br />index: ' + obj.index + '<br />selectFlag: ' + selectFlag;
}
          selectFlag = false;

          if(obj.index < playlist2Length)
          {
            player2.sendEvent('ITEM', obj.index);
            player2.sendEvent('STOP');
          }
          else
          {
            player3.sendEvent('ITEM', obj.index - playlist2Length);
            player3.sendEvent('STOP');
          }
        }
        else if(obj.id == 'player2')
        {
if(instrumentation)
{
  gid('selection2').innerHTML = '<br />Selection2:<br />obj.id: ' + obj.id + '<br />index: ' + obj.index + '<br />selectFlag: ' + selectFlag;
}
          if(selectFlag)
          {
            player2.sendEvent('STOP');
            player1.sendEvent('ITEM', obj.index);
          }
          selectFlag = true;
        }
        else if(obj.id == 'player3')
        {
if(instrumentation)
{
  gid('selection3').innerHTML = '<br />Selection3:<br />obj.id: ' + obj.id + '<br />index: ' + obj.index + '<br />selectFlag: ' + selectFlag;
}
          if(selectFlag)
          {
            player3.sendEvent('STOP');
            player1.sendEvent('ITEM', obj.index + playlist2Length);
          }
          selectFlag = true;
        }
      };


      function playlistMonitor(obj)
      {
//alert('playlistMonitor');
        player1.sendEvent('ITEM', 11);
if(instrumentation)
{
  var listnodes = '<br />';

  for(var j in obj.playlist)
  {
    listnodes += '<br />Track: ' + j + '<br />';

    for(var k in obj.playlist[j])
    {
      listnodes += '<li>' + k + ': ' + obj.playlist[j][k] + '</li>';
    }
  }
  gid('listnodes').innerHTML = '<br />Playlist:' + listnodes;
}
      };

      function gid(name)
      {
        return document.getElementById(name);
      };
    </script>

<!--
    <script type="text/javascript">
      var changing     = false;
      var dofunnyStuff =  true; // cacheBuster for IE - true=enable  false=disable


//...this code goes in the itemMonitor(obj) function
      function itemMonitor(obj)
      {
        //...change the player item
        if(dofunnyStuff)
        {
          changing = true;
          funnyStuff(obj.index);
        }
        else
        {
          player1.sendEvent('ITEM', obj.index);
        }
gid('item').innerHTML = 'Current Item: ' + currentItem + '<br />New Item : ' + newItem;
      };


      function funnyStuff(idx) // AKA cacheBuster
      {
        var playlist = player1.getPlaylist();

/*
//...don't need it!
//...determine the media type since the file extension won't be available
var type;
switch(playlist[idx].file.substring(playlist[idx].file.length - 3))
{
  case 'flv': case 'mp4':
    type = 'video';
    break;
  case 'mp3':
    type = 'sound';
    break;
  default:
    type = 'undefined';
}
*/

        //...add random number to file
        playlist[idx].file = playlist[idx].file.replace(/\?.*/, '')  + '?' + (Math.round(1000 * Math.random()));

//...don't need it!
//...set a type
//playlist[idx].type = type;

//...just for testing
//playlist[idx].title = playlist[idx].title + 'a';

        //...reload playlist
        player1.sendEvent('LOAD', playlist);

        //...select item to play
        player1.sendEvent('ITEM', idx);

        //...done changing playlist
        changing = false;
//alert('Done changing playlist index: ' + idx + '\nFile: ' + player1.getPlaylist()[idx].file);
      };
    </script>
-->

    <script type="text/javascript">
      var playlist2 = encodeURIComponent('playlist_songs.xml');
      var playlist3 = encodeURIComponent('playlist_Ruby.xml');

      var flashvars =
      {
        'streamer':                     'lighttpd',
        'file':                          playlist2,
        'playlist':                     'none',
        'stretching':                   'exactfit',
        'bufferlength':                 '2',
        'volume':                       '70',
        'repeat':                       'list',
        'shuffle':                      'false',
        'frontcolor':                   'CCCCCC',
        'backcolor':                    '333333',
        'lightcolor':                   '8080FF',
        'screencolor':                  '333333',
        'id':                           'player1',
        'autostart':                    'false'
      };

      var params =
      {
        'allowfullscreen':              'true',
        'allowscriptaccess':            'always',
        'bgcolor':                      '#FFFFFF'
      };

      var attributes =
      {
        'id':                           'player1',
        'name':                         'player1'
      };

      swfobject.embedSWF('player-4.4.162.swf', 'player1', '320', '280', '9.0.124', false, flashvars, params, attributes);

      var attributes =
      {
        'id':                           'player2',
        'name':                         'player2'
      };

      flashvars.file                  =  playlist2;
      flashvars.controlbar            = 'none';
      flashvars.playlist              = 'bottom';
      flashvars.playlistsize          = '460';
      flashvars.id                    = 'player2';
      flashvars['playlist.thumbs']    = 'false';

      swfobject.embedSWF('player-4.4.162.swf', 'player2', '320', '460', '9.0.124', false, flashvars, params, attributes);

      var attributes =
      {
        'id':                           'player3',
        'name':                         'player3'
      };

      flashvars.file                  =  playlist3;
      flashvars.playlistsize          = '180';
      flashvars.id                    = 'player3';
      flashvars['playlist.thumbs']    = 'true';

      swfobject.embedSWF('player-4.4.162.swf', 'player3', '320', '180', '9.0.124', false, flashvars, params, attributes);
    </script>

  </head>

  <body>

    <div id="playercontainer1" class="playercontainer1"><a id="player1" class="player1" href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">Get the Flash Player to see this Media Player.</a></div>
    <div id="playercontainer2" class="playercontainer2"><a id="player2" class="player2" href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">Get the Flash Player to see this Media Player.</a></div>
    <div id="playercontainer3" class="playercontainer3"><a id="player3" class="player3" href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">Get the Flash Player to see this Media Player.</a></div>

    <!-- for testing -->
    <div id="players1"   style="color:black;">
    </div>
    <div id="players2"   style="color:black;">
    </div>
    <div id="playlists"  style="color:black;">
    </div>
    <div id="selection"  style="color:black;">
    </div>
    <div id="selection1" style="color:black;">
    </div>
    <div id="selection2" style="color:black;">
    </div>
    <div id="selection3" style="color:black;">
    </div>
    <div id="item"       style="color:black;">
    </div>
    <div id="listnodes"  style="color:black;">
    </div>

  </body>

</html>

Initial URL
http://www.longtailvideo.com/support/forum/Setup-Problems/16080/First-playlist-on-right-and-second-on-the-left-#msg109396

Initial Description

                                

Initial Title
FLV Player 2 playlists 1 player

Initial Tags

                                

Initial Language
HTML