How to separate two players on same page

12 posts | return to the JavaScript Interaction forum | get the rss feed for this thread

Oct. 23, 2009TBD

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>

Oct. 25, 2009Zachary Ozer

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.

Oct. 25, 2009TBD

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?

Oct. 25, 2009hobbs

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.

Oct. 26, 2009TBD

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);
};

Oct. 26, 2009hobbs

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>



Oct. 26, 2009TBD

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?

Oct. 26, 2009hobbs

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.

Oct. 27, 2009TBD

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

Oct. 27, 2009hobbs

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;

    ...



Oct. 27, 2009TBD

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

Oct. 29, 2009TBD

hobbs are you still there please?

Add a reaction

You can also return to the category or try this search for related threads.

Your name *

Supported codes:

 

submit