When I use the multiple playlist configuration with the dropdown playlist selection box, I would like a picture to change on the page. i.e.: if playlist1 is selected picture1 will be displayed, if playlist2 is selected, picture 1 will be replaced by picture 2 and so on.
change picture with on playlist selection
Posted: Wed, 2008-01-23 22:44
Ward B
Posted: Thu, 2008-01-24 03:56
Rainer
If you use a simple HTML-DROPDOWN you can write this rule (with prototype and bevaviour):
'#myplaylist' : function(el) {
el.autocomplete=''off;
el.className='myclassnameforfinestylish';
el.onchange = function() {
$('pict').src=el.getAttribute('rel'); // in rels are the location of picture
/ now comes the call of an api function from jeroen:
changeplaylist(el.value); // in values are the urls of XML
}
}
<select id='myplaylist'>
<option rel='/imgmypict.jpg' value='1.xml'>My finest List</option>
<option rel='/imgmyotherpict.jpg' value='2.xml'>My other finest List</option>
</select>
Posted: Thu, 2008-01-24 09:54
Ward B
I have tried to plug your script into the one I am working with but can't seem to figure out how I Identify the picture to be changed and how the command is accomplished. The dropdown seems to work ok... I have attached the script below. The picture that I want to change is in layer1 (changePic1.gif) - it would change to pic2.gif, pic3.gif, etc.
I really appreciate your help with this, and as a side note... this is the most amazing player that I have ever seen!
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
var theItem;
var selFile;
function loadPlay(file,idx) {
theItem=idx;
selFile=file;
createPlayer(selFile);
setTimeout("play()",1100);
};
function play() {
sendEvent('playitem',theItem);
};
function sendEvent(typ,prm) {
thisMovie("thePlayerId").sendEvent(typ,prm);
};
function thisMovie(movieName) {
if(navigator.appName.indexOf("Microsoft") != -1) {
return window[movieName];
} else {
return document[movieName];
}
};
'#myplaylist' : function(el) {
el.autocomplete=''off;
el.className='myclassnameforfinestylish';
el.onchange = function() {
$('pict').src=el.getAttribute('rel'); // in rels are the location of picture
/ now comes the call of an api function from jeroen:
changeplaylist(el.value); // in values are the urls of XML
}
}
function createPlayer(theFile) {
var s = new SWFObject("mediaplayer.swf","thePlayerId","300","355","7");
s.addParam("allowfullscreen","true");
s.addVariable("file",theFile);
s.addVariable("width","300");
s.addVariable("height","355");
s.addVariable("displayheight","230");
s.addVariable("overstretch","fit");
s.addVariable('frontcolor','0x004400');
s.addVariable('lightcolor','0x00AA00');
s.addVariable("showicons","false");
s.addVariable("autostart","false");
s.addVariable("thumbsinplaylist","true");
s.addVariable("enablejs","true");
s.addVariable("javascriptid","thePlayerId");
s.write("placeholder");
}
</script>
</head>
<body onLoad="createPlayer(document.theForm.sel1.value)">
<div id="back"><img name="bgImg" src="fan-green4.gif" width="100%" height="100%"></div>
<div id="txt">
This page demos the <a href="http://www.jeroenwijering.com/?item=JW_FLV_Media_Player">FLV Mediaplayer</a> by Jeroen Wijering<br>
with multiple playlists, and controlled by links:<p>
load "playlist_mp3.xml" and play <a href="javascript:loadPlay('playlist_mp3.xml', 3);">item 3</a>.<p>
play <a href="javascript:sendEvent('playitem',0);">item 0</a> of the current playlist.<br>
play <a href="javascript:sendEvent('playitem',1);">item 1</a> of the current playlist.<br>
<a href="javascript:sendEvent('stop');">stop</a>
</div>
<div id="Layer1" style="position:absolute; width:98px; height:115px; z-index:1; left: 476px; top: 160px;"><img src="changePic1.gif" width="150" height="150"></div>
<form id="theForm" name="theForm">
<select name="sel1" onchange="javascript:createPlayer(document.theForm.sel1.value)" style="width:300px">
<option rel='/changePic1.gif' value='playlist1.xml'>My First List</option>
<option rel='/changePic2.gif' value='playlist2.xml'>My Second List List</option>
<option rel='/changePic3.gif' value='playlist3.xml'>My Third List</option>
<option value="playlist_playlist1.xml" selected>playlist_playlist1.xml</option>
</select>
</form>
<div id="placeholder"><a href="http://www.macromedia.com/go/getflashplayer">Get Flash</a> to see this player</div>
</body>
</html>
Posted: Thu, 2008-01-24 14:32
andersen
heres a slightly different way doing the same, but using an array for the image urls, see it in action here: [url=F:\Lars BackUp\mediaplayer\multipleplaylistsimg.htm]multipleplaylistsimg[/url]
<html>
<head>
<title>Multiple playlists and image demo</title><style type="text/css">
#theForm { POSITION:absolute; LEFT:100px; TOP:200px; Z-INDEX:1 }
#placeholder { POSITION: absolute; LEFT:100px; TOP:222px; Z-INDEX:1 }
<strong>#theImg { POSITION: absolute; LEFT:200px; TOP:100px; Z-INDEX:1 }</strong>
</style>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
<strong>var imgURL = new Array();
imgURL[0] = "cover.jpg";
imgURL[1] = "testpicture.png";
imgURL[2] = "thumb-remember.jpg";
imgURL[3] = "flamingo.jpg";</strong>
function createPlayer(theFile) {
<strong>document.getElementById('theImg').src = imgURL[document.theForm.sel1.selectedIndex];</strong>
var s = new SWFObject("mediaplayer.swf","thePlayerId","300","355","7");
s.addParam("allowfullscreen","true");
s.addVariable("file",theFile);
s.addVariable("width","300");
s.addVariable("height","355");
s.addVariable("displayheight","230");
s.addVariable("overstretch","fit");
s.addVariable('frontcolor','0x004400');
s.addVariable('lightcolor','0x00AA00');
s.addVariable("showicons","false");
s.addVariable("autostart","false");
s.addVariable("thumbsinplaylist","true");
s.addVariable("enablejs","true");
s.addVariable("javascriptid","thePlayerId");
s.write("placeholder");
}
</script>
</head>
<body onLoad="createPlayer(document.theForm.sel1.value)">
<form id="theForm" name="theForm">
<select name="sel1" onchange="javascript:createPlayer(document.theForm.sel1.value)" style="width:300px">
<option value="playlist_mp3.xml">playlist_mp3.xml</option>
<option value="playlist_mixmedia.xml" selected>playlist_mixmedia.xml</option>
<option value="playlist_remember.xml">playlist_remember.xml</option>
<option value="playlist_birds.xml">playlist_birds.xml</option>
</select>
</form>
<div id="placeholder"><a href="http://www.macromedia.com/go/getflashplayer">Get Flash</a> to see this player</div>
<strong><img id="theImg" src="blank.gif" width="90" height="68"></strong>
</body>
</html>
Posted: Thu, 2008-01-24 16:24
Ward B
andersen,
Thank you for your help and knowledge. I clicked on the link "multipleplaylistsimage" above to see it in action but the link does not connect it shows that it connects to: file:///F:/Lars%20BackUp/mediaplayer/multipleplaylistsimg.htm and it opens to: http://www.jeroenwijering.com/?thread=8683 which is a blank page.
I noticed that Dreamweaver put up a notice while I was setting up the other page that the rel command was not recognized in browsers earlier than 7 or 8 (I don't remember exactly) .... It looks as if using the array for the images took care of that problem besides making it cleaner. Once again, thanks...
Posted: Thu, 2008-01-24 16:45
andersen
oops - sorry, my bad: [url=http://home5.inet.tele.dk/nyboe/flash/mediaplayer/multipleplaylistsimg.htm]multipleplaylistsimg[/url] this should work...
Posted: Thu, 2008-01-24 17:00
Ward B
That is soooo cooolllll ! It's exactly what I was trying to accomplish. With this configuration I can run a single page with numerous playlist choices and the changing jpg "intro" to each playlist can be displayed at the top of the page each time a different one is selected. Many video's, one page, different "header or banner" ... You can't get better than that. Excellent!
One last question... After a playlist is selected, can the dropdown box "clear" or go out of focus? I noticed that if you select a playlist and then try to select an item in the playlist without clicking outside the box first, the playlist changes with the mouse roller.... If not, it's not a big deal... they would just have to live with it.
Posted: Thu, 2008-01-24 18:26
andersen
i think this is the closest you will get to that - it doesnt work in all browsers though, but it does work in IE...
<script type="text/javascript"><strong>function thisMovie(movieName) {
if(navigator.appName.indexOf("Microsoft") != -1) {
return window[movieName];
} else {
return document[movieName];
}
}</strong>
var imgURL = new Array();
imgURL[0] = "cover.jpg";
imgURL[1] = "testpicture.png";
imgURL[2] = "thumb-remember.jpg";
imgURL[3] = "flamingo.jpg";
function createPlayer(theFile) {
document.getElementById('theImg').src = imgURL[document.theForm.sel1.selectedIndex];
var s = new SWFObject("mediaplayer.swf","thePlayerId","300","355","7");
s.addParam("allowfullscreen","true");
s.addVariable("file",theFile);
s.addVariable("width","300");
s.addVariable("height","355");
s.addVariable("displayheight","230");
s.addVariable("overstretch","fit");
s.addVariable('frontcolor','0x004400');
s.addVariable('lightcolor','0x00AA00');
s.addVariable("showicons","false");
s.addVariable("autostart","false");
s.addVariable("thumbsinplaylist","true");
s.addVariable("enablejs","true");
s.addVariable("javascriptid","thePlayerId");
s.write("placeholder");
<strong>thisMovie("thePlayerId").focus();</strong>
}
</script>
Posted: Wed, 2008-02-20 20:11
raiskal
If I change the focus at the end of the movie (I'm not sure what to change the focus to), will it drop out of fullscreen like Adobe says here http://www.adobe.com/devnet/flashplayer/articles/full_screen_mode.html >>The full-screen mode in Flash Player is initiated through ActionScript and can be terminated through ActionScript, keyboard shortcuts, or by the user switching focus to another window.<<
Posted: Fri, 2008-07-04 09:50
nakliyat
thanks If I change the focus at the end of the movie (I'm not sure what to change the focus to), will it drop out of fullscreen like Adobe says here http://www.adobe.com/devnet/flashplayer/articles/full_screen_mode.html >>The full-screen mode in Flash Player is initiated through ActionScript and can be terminated through ActionScript, keyboard shortcuts, or by the user switching focus to another window.<<
http://www.ak-kelebek.com
<a href="http://www.ak-kelebek.com">nakliyat</a>
Posted: Fri, 2009-11-20 19:32
xoops
Thank you very much for this information. Good post thanks for sharing. I like this site. Yes http://http://www.xoopsturkey.com <a href="http://http://www.xoopsturkey.com">evden eve nakliyat</a>
If you use a simple HTML-DROPDOWN you can write (with prototype and bevaviour):
'#myplaylist' : function(el) {el.onchange = function() {
$('pict').src=el.getAttribute('rel'); // in rels are the location of picture
changeplaylist(el.value); // in values are the urls of XML
}
}
<select id='myplaylist'>
<option rel='/imgmypict.jpg' value='1.xml'>My finest List</option>
<option rel='/imgmyotherpict.jpg' value='2.xml'>My other finest List</option>
</select>