Order Now AdSolution Sign Up | Login » Bits on the Run Sign Up | Login »

Forums

JW Player
/
JavaScript Interaction

How to separate two players on same page

11 replies [Last post]
Posted: Fri, 2009-10-23 12:47 TBD
Anonymous's picture

Hey!
I got 2 players on the same page
both of them have a custom html playlist
(printPlaylistData & getPlaylistData)
So when I start one player to play it messes the other one.

I will love to know how do I separate them please to not get conflict.
here are both of the players codes:
code of the player #1 with the cookies:

<script type="text/javascript">
      function createCookie(file, title, time, state, volume, days)
      {
        if(days)
        {
          var date = new Date();
          date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
          var expires = '; expires=' + date.toGMTString();
        }
        else
        {
          var expires = '';
        }

        document.cookie = 'file='    + escape(file)    + expires + '; path=/';
        document.cookie = 'title='   + escape(title)   + expires + '; path=/';
        document.cookie = 'time='    + escape(time)    + expires + '; path=/';
        document.cookie = 'state='   + escape(state)   + expires + '; path=/';
        document.cookie = 'volume='  + escape(volume)  + expires + '; path=/';
      };

      function readCookie(name)
      {
        var nameEQ = name + '=';
        var ca = document.cookie.split(';');

        for(var j = 0; j < ca.length; j++)
        {
          var c = ca[j];

          while(c.charAt(0) == ' ')
          {
            c = c.substring(1, c.length);
          }

          if(c.indexOf(nameEQ) == 0)
          {
            return c.substring(nameEQ.length, c.length);
          }
        }
        return null;
      };

      function eraseCookie(name)
      {
        createCookie(name, '', -1);
      };
    </script>

    <script type="text/javascript">
      var file    =  unescape(readCookie('file'));
      var title   =  unescape(readCookie('title'));
      var time    =  unescape(readCookie('time'));
      var state   =  unescape(readCookie('state'));
      var volume  =  unescape(readCookie('volume'));

//alert('Cookie:\nFile: ' + file + '\nTitle: ' + title + '\nTime: ' + time + '\nState: ' + state + '\nVolume: ' + volume);

      var flashvars =
      {
        'shuffle':                        'false',
        'repeat':                         'always',
        'playlist':                       'none',
        'controlbar':                     'bottom',
        'icons':                          'false',
        'backcolor':                      'FFFFFF',
        'frontcolor':                     'FFFFFF',
        'lightcolor':                     '00FF00',
        'id':                             'player',
        'autostart':                      'true',
        'linktarget':                     '_self',
        'skin':                           '/scripts/musicplayerskin.swf'

      };

      var params =
      {
        'allowscriptaccess':              'always',
        'allowfullscreen':                'false',
        'wmode':                          'transparent'
      };

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

      if((file == 'null') || (file == ''))
      {
        flashvars.file = '/music';
      }
      else
      {
        flashvars.file = file;
      }
      //...workaround because player.getConfig().file doesn't return the new file
      var currentFile = flashvars.file;

      if((volume == null) || (volume == ''))
      {
        flashvars.volume = volume;
      }
      else
      {
        flashvars.volume = '80';
      }

      swfobject.embedSWF('/scripts/player.swf', 'player', '338', '20', '9.0.124', false, flashvars, params, attributes);
    </script>

    <script type="text/javascript">
      var player        =  null;
      var playlist      =  null;
      var previousItem  =  null;
      var currentTime   =  null;
      var seek          =  true;
      var indexitem     =  null;

      function playerReady(obj)
      {
        player = gid(obj.id);
        addListeners();
      };

      function addListeners()
      {
        playlist = player.getPlaylist();

        if(playlist.length > 0)
        {
          player.addControllerListener('ITEM',    'itemListener');
          player.addControllerListener('VOLUME',  'volumeListener');
          player.addModelListener('TIME',         'timeListener');
          itemListener({index:0});
          volumeListener({percentage:player.getConfig().volume});
          printPlaylistData();

          //...index to title
          for(var j in playlist)
          {
            for(var k in playlist[j])
            {
              if(playlist[j][k] == title)
              {
                player.sendEvent('ITEM', j);
              }
            }
          }
        }
        else
        {
          setTimeout("addListeners()", 100);
        }
      };

      function itemListener(obj)
      {
        gid('item').innerHTML = 'Current Item: ' + obj.index + '<br>Previous Item: ' + previousItem;
        getPlaylistData(obj.index);
        previousItem = obj.index;
      };

      function volumeListener(obj)
      {
        gid('volume').innerHTML = 'Volume: ' + obj.percentage;
      };

      function timeListener(obj)
      {
        currentTime = obj.position;

        //...only if there is serverside support for streaming
        if((seek == true) && (obj.position > 0))
        {
          seek = false;
          player.sendEvent('SEEK', time);
        }

        if((state != 'PLAYING') && (obj.position > time))
        {
          state = 'PLAYING';
          player.sendEvent('PLAY', 'false');
        }
      };

      function getPlaylistData(idx)
      {

        gid('flashmusicnowplaying').innerHTML = '<div class="flashmusicnowplaying"><span class="nowplayingscroll"><marquee behavior="scroll" scrollamount="2" direction="left" width="174" height="20">' + playlist[idx].author + ' - ' + playlist[idx].title + '</marquee></span></div>';
      };

      function printPlaylistData()
      {
        var txt = '<a class="prevPage" onFocus="if(this.blur)this.blur()">«</a><div class="scrollable"><div class="items">';

        for(var i in playlist)
        {
          txt += '<a href="#" onclick="javascript:player.sendEvent(\'ITEM\',' + i + '); javascript:return false;" title="Click to Play" onFocus="if(this.blur)this.blur()"><img src="' + playlist[i].image + '" align="left" border="0" alt="Click to Play" vspace="0" hspace="0" /><div>' + playlist[i].title + '<br />' + playlist[i].author + '<br /><span>' + playlist[i].description + '</span></div></a>';
        }

        txt += '</div></div><a class="nextPage" onFocus="if(this.blur)this.blur()">»</a>';
        gid('playlist').innerHTML = txt;
      };

      function loadPlaylist(file, item)
      {
        if(!item) item = 0;
        indexitem = item;

        player.sendEvent('STOP');
        player.sendEvent('LOAD', {file:file});

        //...workaround because player.getConfig().file doesn't return the new file
        currentFile = file;
        setTimeout("player.sendEvent('ITEM', indexitem); playlist = player.getPlaylist();", 100);
        setTimeout("itemListener({index:indexitem}); printPlaylistData();", 200);
      };

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

code of the player #2:

<script type="text/javascript">
var currentItem = -1;
var previousItem = -1;
var currentVolume = 80;
var oldWrapper = null;
var oldCode;

function removeOldPlayer(theOldWrapper, theOldCode) {
document.getElementById(theOldWrapper).innerHTML = theOldCode;
}

function createPlayer(theWrapper, thePlaceholder, thePlayer, theFile, theStart) {
if (oldWrapper != null) { removeOldPlayer(oldWrapper, oldCode); }

oldWrapper = theWrapper;
oldCode = document.getElementById(oldWrapper).innerHTML;

  var flashvars =
      {
'file':                           theFile,
'autostart':                      theStart,
'shuffle':                        'false',
'repeat':                         'none',
'linktarget':                     '_self',
'backcolor':                      '000000',
'frontcolor':                     'ffffff',
'lightcolor':                     '00ff00',
'screencolor':                    '000000',
'volume':                         '80',
'fullscreen':                     'true',
'playlist':                       'none',
'usefullscreen':                  'true',
'controlbar':                     'over',
'stretching':                     'exactfit',
'skin':                           '/scripts/videoshomeskin.swf'
      }

      var params =
      {
        'allowscriptaccess':              'always',
        'allowfullscreen':                'true',
        'wmode':                          'transparent'
      }

      var attributes =
      {
        'id':                             thePlayer,
        'name':                           thePlayer
      }

      swfobject.embedSWF('/scripts/player.swf', thePlaceholder, '220', '180', '9.0.124', false, flashvars, params, attributes);
}
      var player        =  null;
      var playlist      =  null;
      var previousItem  =  null;
      var currentTime   =  null;
      var seek          =  true;
      var indexitem     =  null;

      function playerReady(obj)
      {
        player = gid(obj.id);
        addListeners();
      }

      function addListeners()
      {
        playlist = player.getPlaylist();

        if(playlist.length > 0)
        {
          player.addControllerListener('ITEM',    'itemListener');
          player.addControllerListener('VOLUME',  'volumeListener');
          itemListener({index:0});
          volumeListener({percentage:player.getConfig().volume});
          printPlaylistData();
        }
        else
        {
          setTimeout("addListeners()", 100);
        }
      }

      function itemListener(obj)
      {
        gid('item').innerHTML = 'Current Item: ' + obj.index + '<br>Previous Item: ' + previousItem;
        getPlaylistData(obj.index);
        previousItem = obj.index;
      }

      function volumeListener(obj)
      {
        gid('volume').innerHTML = 'Volume: ' + obj.percentage;
      }

      function timeListener(obj)
      {
        currentTime = obj.position;

        //...only if there is serverside support for streaming
        if((seek == true) && (obj.position > 0))
        {
          seek = false;
          player.sendEvent('SEEK', time);
        }

        if((state != 'PLAYING') && (obj.position > time))
        {
          state = 'PLAYING';
          player.sendEvent('PLAY', 'false');
        }
      }

      function getPlaylistData(idx)
      {

        gid('videoshometitle').innerHTML = '' + playlist[idx].title + '';

        gid('videoshomeshare').innerHTML = '<a href="http://www.facebook.com/share.php?u='+playlist[idx].link+'" target="_blank" class="facebook_share_video" onfocus="if(this.blur)this.blur()">+ Share Video</a><a href="'+playlist[idx].link+'" target="_blank" class="comment_video" onfocus="if(this.blur)this.blur()">Comment on Video</a>';
      }

      function printPlaylistData()
      {
        var txt = '';

        for(var i in playlist)
        {
          txt += '<a href="#" onclick="javascript:player.sendEvent(\'ITEM\',' + i + '); javascript:return false;" title="PLAY - ' + playlist[i].title + ', ' + playlist[i].author + ' - ' + playlist[i].description + '" onfocus="if(this.blur)this.blur()"><table cellpadding="0" cellspacing="0" border="0"><tr><td><img src="' + playlist[i].image + '" border="0" alt="PLAY - ' + playlist[i].title + ', ' + playlist[i].author + ' - ' + playlist[i].description + '" /></td><td><div><div>' + playlist[i].title + '</div><div>' + playlist[i].author + '</div><div>' + playlist[i].description + '</div></div></td></tr></table></a>';
        }

        txt += '';
        gid('videoshomeplaylist').innerHTML = txt;
      }

      function loadPlaylist(file, item)
      {
        if(!item) item = 0;
        indexitem = item;

        player.sendEvent('STOP');
        player.sendEvent('LOAD', {file:file});

        //...workaround because player.getConfig().file doesn't return the new file
        currentFile = file;
        setTimeout("player.sendEvent('ITEM', indexitem); playlist = player.getPlaylist();", 100);
        setTimeout("itemListener({index:indexitem}); printPlaylistData();", 200);
      }

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

Posted: Sun, 2009-10-25 13:04 Zachary Ozer  
Zachary Ozer's picture

You should only use one playerReady per page.

obj['id'] will tell you the div id of the player that's ready. You should keep track of each player separately handle each appropriately.

Posted: Sun, 2009-10-25 18:25 TBD  
TBD's picture

You should only use one playerReady per page.

Ok I deleted one playerReady function.
but still when I start one player it's changing the playlist of the other one

obj['id'] will tell you the div id of the player that's ready. You should keep track of each player separately handle each appropriately.

sorry I don't know JS can you please tell me what code to edit/delete/add and how please?

Posted: Sun, 2009-10-25 18:41 hobbs  
hobbs's picture

It's done like this:

    <script type="text/javascript">
      var player1  =  null;
      var player2  =  null;

      function playerReady(obj)
      {
        if(obj.id == 'playerID1') player1 = gid(obj.id);
        if(obj.id == 'playerID2') player2 = gid(obj.id);

        if((player1 !== null) && (player2 !== null))
        {
          addListeners();
        }
//alert(player1.id + ' ' + player2.id);
      };

Then check for an obj.id of "playerID1" or "playerID2" in your code where relevant.

Posted: Mon, 2009-10-26 07:41 TBD  
TBD's picture

cool it's seems to be in the way to work good
but now I need you to please edit this function too:

      function loadPlaylist(file, item)
      {
        if(!item) item = 0;
        indexitem = item;

        player.sendEvent('STOP');
        player.sendEvent('LOAD', {file:file});

        //...workaround because player.getConfig().file doesn't return the new file
        currentFile = file;
        setTimeout("player.sendEvent('ITEM', indexitem); playlist = player.getPlaylist();", 2000);
        setTimeout("itemListener({index:indexitem}); printPlaylistData();", 4000);
      };

Posted: Mon, 2009-10-26 09:36 hobbs  
hobbs's picture

Just include a player variable that is local to the function:

function loadPlaylist(playerz, file, item)
{
  if(!item) item = 0;
  indexitem = item;

  playerz.sendEvent('STOP');
  playerz.sendEvent('LOAD', {file:file});

  //...workaround because playerz.getConfig().file doesn't return the new file
  currentFile = file;
  setTimeout("playerz.sendEvent('ITEM', indexitem); playlist = playerz.getPlaylist();", 2000);
  setTimeout("itemListener({index:indexitem}); printPlaylistData();", 4000);
};

Whatever calls the function needs to include the player's id.

<button onclick="loadPlaylist('playerID1', 'http://www.domain.com/path/playlist.xml', 2);">LOAD Playlist Item 3</button>

Posted: Mon, 2009-10-26 12:36 TBD  
TBD's picture

I'm getting a JS error:
Object doesn't support this property or method
o_O

do I need to add a var of playerz somewhere
or/and change every 'player.' in the others functions to 'playerz.' please?

Posted: Mon, 2009-10-26 16:36 hobbs  
hobbs's picture

OOPS! My big mistake.

<button onclick="loadPlaylist(player1, 'http://www.domain.com/path/playlist.xml', 2);">LOAD Playlist Item 3</button>

Use player 1 or player2, no quotes.

Posted: Tue, 2009-10-27 03:07 TBD  
TBD's picture

another JS error:
'playerz' is undefined

so I added var playerz = null; with the others vars
and getting this error:
'playerz' is null or not an object

Posted: Tue, 2009-10-27 10:02 hobbs  
hobbs's picture

JavaScript variables used in the setTimeout() method must be declared global.

var indexitem;
var playerz;
function loadPlaylist(player, file, item)
{
  if(!item) item = 0;
  indexitem = item;
  playerz = player;

    ...

Posted: Tue, 2009-10-27 13:28 TBD  
TBD's picture

Thanks it's making a progress but still not there yet

here is a link to my test page that may help you to continue helping me please:
http://tinyurl.com/ygeygf5

you can see that the bottom music player have a cookie and you can change the playlists on the left button.

the reason that the videos player on the top right of the page is into a function -
is because I want that when it being created it will pause the bottom-music player

Posted: Thu, 2009-10-29 11:46 TBD  
TBD's picture

hobbs are you still there please?

  • Locked