I am trying to set up just the basic player but with a detached playlist.
I dont need it dragable like in the examples.
Is there a way to just but the playlist in a div that I can position in my webdesign layout the way i want and have it stay there?
Am I missing some kind easy variable that I can just add in? Or hard way? either way.
Thank You
Ive been searching but havent really had much luck. If its out there do you mind linking>?
Ok here is the simulteous players code.
I read in the forums http://www.longtailvideo.com/support/forum/Setup-Problems/15009/How-to-hide-the-video-display-for-an...
to size the video to remove the display.
I need to separate the players now to show one display without a playlist then one with it.
Im trying.
Thank you 2players for pointing me in the right direction.
<html>
<head>
<title>JW API Example 1-1-3-0 - JW FLV Media Player</title>
<style type="text/css">
#wrapper1 { width:320px; height:196px; }
#wrapper2 { width:320px; height:196px; }
#wrapper3 { width:320px; height:196px; }
</style>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
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
}
var params = {
allowfullscreen:"true",
allowscriptaccess:"always"
}
var attributes = {
id:thePlayer,
name:thePlayer
}
swfobject.embedSWF("player_4.swf", thePlaceholder, "320", "196", "9.0.115", false, flashvars, params, attributes);
}
</script>
</head>
<body>
<a href="http://www.jeroenwijering.com/?item=JW_FLV_Media_Player">JW FLV Media Player</a><br>
Multiple Mutually Exclusive players.<br>
<br>
<div id="wrapper1">
<div id="placeholder1">
<img src="preview1gray.png" border="0"
onclick="createPlayer('wrapper1',
'placeholder1',
'player1',
'http://content.bitsontherun.com/videos/3ta6fhJQ.flv',
'true');"></div>
</div>
<br>
<div id="wrapper2">
<div id="placeholder2">
<img src="preview2gray.png" border="0"
onclick="createPlayer('wrapper2',
'placeholder2',
'player2',
'http://content.bitsontherun.com/videos/qyehIiBT.flv',
'true');"></div>
</div>
<br>
<div id="wrapper3">
<div id="placeholder3">
<img src="preview3gray.png" border="0"
onclick="createPlayer('wrapper3',
'placeholder3',
'player3',
'http://content.bitsontherun.com/videos/MPKB9prD.flv',
'true');"></div>
</div>
</body>
</html>
<!-- end of page - delete this and next lines -->
Here's the code for two players, one with display only, the other with playlist only.
It's for the v3.x player and SWFObject v1.5, but you should be able to get the idea of how to control one player with another playlist.
Oh, and BTW, it didn't work very well.
Thank you lefTy for your replay.
I will see what I can do with this.
the playlist in the example doenst seem to work when you accually click on the items you have to click on the buttons. But one of the best examples i have seen so far in my search to find something.
I am looking for something in >v4 so I can use all the cool plugins that Longtail has.
Again thank you.
I'll see if I can update the page for the v4 player this weekend. I haven't fooled around with it since 03-08-08, so it doesn't suprise me that it doesn't work correctly.
Seems to be working:
<!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>Separate Player & Playlist (2 Players) - JWMP v4.4.x - swfobject v2.2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject-2.2.js"></script>
<script type="text/javascript">
var ply = null;
var mpl = null;
var currentItem = -1;
var newItem = 0;
var mplState = null;
var changing = 0;
var dofunnyStuff = 1;
function playerReady(obj)
{
if(obj.id == 'ply')
{
ply = gid(obj.id);
}
if(obj.id == 'mpl')
{
mpl = gid(obj.id);
}
if(ply && mpl)
{
ply.addControllerListener('ITEM', 'itemMonitor');
mpl.addControllerListener('ITEM', 'itemMonitor');
ply.addModelListener('STATE', 'stateMonitor');
mpl.addModelListener('STATE', 'stateMonitor');
//...just for testing
//ply.addControllerListener('PLAYLIST', 'playlistMonitor');
//alert('Add Listeners');
}
};
function itemMonitor(obj)
{
if((obj.id == 'ply') && (!changing))
{
newItem = obj.index;
if(currentItem != newItem)
{
currentItem = newItem;
//...change the player item
if(dofunnyStuff)
{
changing = true;
funnyStuff(newItem);
}
else
{
mpl.sendEvent('ITEM', newItem);
}
}
}
else if(obj.id == 'mpl')
{
newItem = obj.index;
if(currentItem != newItem)
{
currentItem = newItem;
//...update the playlist item
setTimeout("ply.sendEvent('ITEM', newItem)", 100);
}
}
//...just for testing
//gid('item').innerHTML = 'Current Item: ' + currentItem + '<br />New Item : ' + newItem;
};
function stateMonitor(obj)
{
//...if the playlist player is playing, pause it
if((obj.id == 'ply') && (obj.newstate == 'PLAYING'))
{
ply.sendEvent('PLAY', 'false');
}
else if((obj.id == 'mpl') && (obj.newstate == 'PLAYING'))
{
mplState = 'PLAYING';
}
};
function funnyStuff(idx) // AKA cacheBuster
{
//...get playlist from playlist player
var playlist = ply.getPlaylist();
//...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()));
//...set a type
playlist[idx].type = type;
//...just for testing
//playlist[idx].title = playlist[idx].title + 'a';
//...reload playlist player's playlist
ply.sendEvent('LOAD', playlist);
//...get playlist from media player
var playlist = mpl.getPlaylist();
//...add random number to file
playlist[idx].file = playlist[idx].file.replace(/\?.*/, '') + '?' + (Math.round(1000 * Math.random()));
//...set a type
playlist[idx].type = type;
//...reload media player's playlist
mpl.sendEvent('LOAD', playlist);
//...select item to play in media player
mpl.sendEvent('ITEM', idx);
//...done changing playlist
changing = false;
//alert('Done changing playlist index: ' + idx + '\nFile: ' + ply.getPlaylist()[idx].file);
};
//...just for testing
function playlistMonitor(obj)
{
var listnodes = '<br />';
for(var j in obj.playlist)
{
listnodes += '<br />';
for(var k in obj.playlist[j])
{
listnodes += '<li>' + k + ': ' + obj.playlist[j][k] + '</li>';
}
}
gid('listnodes').innerHTML = 'Playlist: ' + listnodes;
};
function gid(name)
{
return document.getElementById(name);
};
</script>
<script type="text/javascript">
var flashvars =
{
'file': encodeURIComponent('playlist_songs.xml'),
'playlist': 'none',
'stretching': 'none',
'bufferlength': '2',
'volume': '70',
'repeat': 'list',
'shuffle': 'false',
'frontcolor': 'CCCCCC',
'backcolor': '333333',
'lightcolor': 'EEEEEE',
'screencolor': '333333',
'autostart': 'true'
};
var params =
{
'allowfullscreen': 'true',
'allowscriptaccess': 'always',
'bgcolor': '#FFFFFF'
};
var attributes =
{
'id': 'mpl',
'name': 'mpl'
};
swfobject.embedSWF('player-4.4.135.swf', 'player', '260', '230', '9.0.124', false, flashvars, params, attributes);
var attributes =
{
'id': 'ply',
'name': 'ply'
};
flashvars.playlist = 'bottom';
flashvars.playlistsize = '240';
flashvars.volume = '1';
flashvars.autostart = 'false';
flashvars['playlist.thumbs'] = 'false';
swfobject.embedSWF('player-4.4.135.swf', 'playlist', '260', '260', '9.0.124', false, flashvars, params, attributes);
</script>
</head>
<body>
<div id="playercontainer" class="playercontainer">
<a id="player" class="player" 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="playlistcontainer" class="playlistcontainer" style="position:absolute;top:100px;left:777px;">
<a id="playlist" class="playlist" href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">Get the Flash Player to see this Media Player.</a>
<!-- just for testing -->
</div>
<div id="item" style="color:black;">
</div>
<div id="listnodes" style="color:black;">
</div>
</body>
</html>
Wow that was fast, what a ninja. Thank you so much.
Little bug: When clicking through the playlist items they get removed from the list though.
"Little bug: When clicking through the playlist items they get removed from the list though."
Hmmmmm.... that's quite odd as there is nothing in the code that would remove an item.
What version of swfobject are you using?
What player version are you using?
I've simplified the code a bit; removed some code that wasn't necessary:
<!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>Separate Player & Playlist (2 Players) - JWMP v4.4.x - swfobject v2.2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject-2.2.js"></script>
<script type="text/javascript">
var ply = null;
var mpl = null;
var currentItem = -1;
var newItem = 0;
var changing = 0;
var dofunnyStuff = 1; // cacheBuster for IE - 1=enable 0=disable
function playerReady(obj)
{
if(obj.id == 'ply')
{
ply = gid(obj.id);
}
if(obj.id == 'mpl')
{
mpl = gid(obj.id);
}
if(ply && mpl)
{
ply.addControllerListener('ITEM', 'itemMonitor');
mpl.addControllerListener('ITEM', 'itemMonitor');
ply.addModelListener('STATE', 'stateMonitor');
mpl.addModelListener('STATE', 'stateMonitor');
//...just for testing
//ply.addControllerListener('PLAYLIST', 'playlistMonitor');
//alert('Add Listeners');
}
};
function itemMonitor(obj)
{
if((obj.id == 'ply') && (!changing))
{
newItem = obj.index;
if(currentItem != newItem)
{
currentItem = newItem;
//...change the player item
if(dofunnyStuff)
{
changing = true;
funnyStuff(newItem);
}
else
{
mpl.sendEvent('ITEM', newItem);
}
}
}
else if(obj.id == 'mpl')
{
newItem = obj.index;
if(currentItem != newItem)
{
currentItem = newItem;
//...update the playlist item
setTimeout("ply.sendEvent('ITEM', newItem)", 100);
}
}
//...just for testing
//gid('item').innerHTML = 'Current Item: ' + currentItem + '<br />New Item : ' + newItem;
};
function stateMonitor(obj)
{
//...if the playlist player is playing, stop it
if((obj.id == 'ply') && (obj.newstate == 'PLAYING'))
{
ply.sendEvent('STOP', 'null');
}
};
function funnyStuff(idx) // AKA cacheBuster
{
//...get playlist from playlist player
var playlist = ply.getPlaylist();
//...add random number to file
playlist[idx].file = playlist[idx].file.replace(/\?.*/, '') + '?' + (Math.round(1000 * Math.random()));
//...just for testing
//playlist[idx].title = playlist[idx].title + 'a';
//...reload playlist player's playlist
ply.sendEvent('LOAD', playlist);
//...get playlist from media player
var playlist = mpl.getPlaylist();
//...add random number to file
playlist[idx].file = playlist[idx].file.replace(/\?.*/, '') + '?' + (Math.round(1000 * Math.random()));
//...reload media player's playlist
mpl.sendEvent('LOAD', playlist);
//...select item to play in media player
mpl.sendEvent('ITEM', idx);
//...done changing playlist
changing = false;
//alert('Done changing playlist index: ' + idx + '\nFile: ' + ply.getPlaylist()[idx].file);
};
//...just for testing
function playlistMonitor(obj)
{
var listnodes = '<br />';
for(var j in obj.playlist)
{
listnodes += '<br />';
for(var k in obj.playlist[j])
{
listnodes += '<li>' + k + ': ' + obj.playlist[j][k] + '</li>';
}
}
gid('listnodes').innerHTML = 'Playlist: ' + listnodes;
};
function gid(name)
{
return document.getElementById(name);
};
</script>
<script type="text/javascript">
var flashvars =
{
'file': encodeURIComponent('playlist_songs.xml'),
'playlist': 'none',
'stretching': 'none',
'bufferlength': '2',
'volume': '70',
'repeat': 'list',
'shuffle': 'false',
'frontcolor': 'CCCCCC',
'backcolor': '333333',
'lightcolor': 'EEEEEE',
'screencolor': '333333',
'autostart': 'true'
};
var params =
{
'allowfullscreen': 'true',
'allowscriptaccess': 'always',
'bgcolor': '#FFFFFF'
};
var attributes =
{
'id': 'mpl',
'name': 'mpl'
};
swfobject.embedSWF('player-4.4.135.swf', 'player', '260', '230', '9.0.124', false, flashvars, params, attributes);
var attributes =
{
'id': 'ply',
'name': 'ply'
};
flashvars.playlist = 'bottom';
flashvars.playlistsize = '240';
flashvars.volume = '1';
flashvars.autostart = 'false';
flashvars['playlist.thumbs'] = 'false';
swfobject.embedSWF('player-4.4.135.swf', 'playlist', '260', '260', '9.0.124', false, flashvars, params, attributes);
</script>
</head>
<body>
<div id="playercontainer" class="playercontainer">
<a id="player" class="player" 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="playlistcontainer" class="playlistcontainer" style="position:absolute;top:400px;left:777px;">
<a id="playlist" class="playlist" href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">Get the Flash Player to see this Media Player.</a>
<!-- just for testing -->
</div>
<div id="item" style="color:black;">
</div>
<div id="listnodes" style="color:black;">
</div>
</body>
</html>
You could also try turning off the cache buster to see if that makes any difference; that's the only code that messes with the playlist:
var dofunnyStuff = <strong>0</strong>; // cacheBuster for IE - 1=enable 0=disable
you'll need to use two players, control them both with javascript.
search for andersen's demo pages. he has a demo for mutually exclusive players, and one for simultaneous players, which is the one you would want.
hide the playlist for the first player, and hide the display for the second player (showing only the playlist)
use javascript calls to control the first player from the playlist selections on the second player.
the search tool here is your friend. this method has been described multiple times.