Multiple Media Players

[Dblevins]

I have recently embedded windows media player onto my site using the following script.

<div align=center>
<SELECT id=cancion onchange=document.all.music.filename=document.all.cancion.value; size=1 name=Music>
<OPTION selected>::::::::::::: Choose Your Song Here :::::::::::::</OPTION>
<OPTION value=http://url or path to your media>Artist - Song Title</OPTION>
<OPTION value=http://url or path to your media>Artist - Song Title</OPTION>
<OPTION value=http://url or path to your media>Artist - Song Title</OPTION>
</SELECT><BR>
<OBJECT id=music height=230 width=230 classid=clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95>
<PARAM NAME="AutoStart" VALUE="0">
<PARAM NAME="Balance" VALUE="0">
<PARAM NAME="DisplaySize" VALUE="0">
<PARAM NAME="Filename" VALUE="">
<PARAM NAME="Mute" VALUE="0">
<PARAM NAME="SelectionStart" VALUE="-1">
<PARAM NAME="SelectionEnd" VALUE="-1">
<PARAM NAME="ShowControls" VALUE="-1">
<PARAM NAME="ShowAudioControls" VALUE="-1">
<PARAM NAME="ShowDisplay" VALUE="0">
<PARAM NAME="ShowPositionControls" VALUE="-1">
<PARAM NAME="Volume" VALUE="0">
<PARAM NAME="AudioStream" VALUE="-1">
<PARAM NAME="AutoSize" VALUE="0">
<PARAM NAME="AnimationAtStart" VALUE="-1">
<PARAM NAME="AllowScan" VALUE="-1">
<PARAM NAME="AllowChangeDisplaySize" VALUE="-1">
<PARAM NAME="AutoRewind" VALUE="1">
<PARAM NAME="BaseURL" VALUE="">
<PARAM NAME="BufferingTime" VALUE="5">
<PARAM NAME="CaptioningID" VALUE="">
<PARAM NAME="ClickToPlay" VALUE="-1">
<PARAM NAME="CursorType" VALUE="0">
<PARAM NAME="CurrentPosition" VALUE="-1">
<PARAM NAME="CurrentMarker" VALUE="0">
<PARAM NAME="DefaultFrame" VALUE="">
<PARAM NAME="DisplayBackColor" VALUE="0">
<PARAM NAME="DisplayForeColor" VALUE="16777215">
<PARAM NAME="DisplayMode" VALUE="0">
<PARAM NAME="Enabled" VALUE="-1">
<PARAM NAME="EnableContextMenu" VALUE="-1">
<PARAM NAME="EnablePositionControls" VALUE="-1">
<PARAM NAME="EnableFullScreenControls" VALUE="0">
<PARAM NAME="EnableTracker" VALUE="-1">
<PARAM NAME="InvokeURLs" VALUE="-1">
<PARAM NAME="Language" VALUE="-1">
<PARAM NAME="PlayCount" VALUE="1">
<PARAM NAME="PreviewMode" VALUE="0">
<PARAM NAME="Rate" VALUE="1">
<PARAM NAME="SAMILang" VALUE="">
<PARAM NAME="SAMIStyle" VALUE="">
<PARAM NAME="SAMIFileName" VALUE="">
<PARAM NAME="SendOpenStateChangeEvents" VALUE="-1">
<PARAM NAME="SendWarningEvents" VALUE="-1">
<PARAM NAME="SendErrorEvents" VALUE="-1">
<PARAM NAME="SendKeyboardEvents" VALUE="0">
<PARAM NAME="SendMouseClickEvents" VALUE="0">
<PARAM NAME="SendMouseMoveEvents" VALUE="0">
<PARAM NAME="SendPlayStateChangeEvents" VALUE="-1">
<PARAM NAME="ShowCaptioning" VALUE="0">
<PARAM NAME="ShowGotoBar" VALUE=0">
<PARAM NAME="ShowStatusBar" VALUE="0">
<PARAM NAME="ShowTracker" VALUE="-1">
<PARAM NAME="TransparentAtStart" VALUE="-1">
<PARAM NAME="VideoBorderWidth" VALUE="0">
<PARAM NAME="VideoBorderColor" VALUE="0">
<PARAM NAME="VideoBorder3D" VALUE="0">
<PARAM NAME="WindowlessVideo" VALUE="0">
</OBJECT>
</div>

This has worked fine. And creates a media player with a drop down list of songs. My problem is I would like to include three different menus and maybe more in the future. I tried to simply copy the script three times as I don't mind if there are three different media players. However once I duplicate the script none of them work.

Please keep answers simple as I am totally new to this and quite often i find myself copying and pasting script with absolutley no idea of what the script actually means...but I'm learning

[MikoLone]

You might think about having one media player and then just changing the media once they have clicked on the song they want to play. Here are some resources that helped me get started with this.

For quicktime

http://developer.apple.com/documenta...ipt/index.html

For WMP

http://msdn2.microsoft.com/en-us/library/bb262209.aspx
http://msdn2.microsoft.com/en-us/library/bb249349.aspx

[MikoLone]

And To quickly fix your problem, You probably just need to change your id names to be unique.

[Dblevins]

I tried changing one of the scripts ie
name=Music> & <OBJECT id=music to read audio instead but that didn't work either. Is that what you mean?

[Dblevins]

ok...looks like I've stumped you all with this one

[Dblevins]

I've tried this using an asx file. Again it works but now I have no way of chosing the file to be played.

I really don't mind how this is done as long as the end result is that viewers to the site can choose from a selection of playlists what they want to hear or see

Any ideas would be appreciated.

[digital-ether]

Originally Posted by Dblevins

I've tried this using an asx file. Again it works but now I have no way of chosing the file to be played.

I really don't mind how this is done as long as the end result is that viewers to the site can choose from a selection of playlists what they want to hear or see

Any ideas would be appreciated.

I believe you can choose the song with an asx file, it would be done by the media player however, and you can use js to control the media player..
If I remember correctly, all an .asx file is, is an XML file with the list of media files and some meta data associated with each media file. So the .asx file will be loaded to the media player as the playlist, controlling the songs will be controlling the playlist..

With the code you had before, the problem was that when you copied, you created multiple "id" attributes of the same name - like mentioned.

What you can do is create copies of the FORM SELECT Element:

<SELECT id=cancion onchange=document.all.music.filename=document.all.cancion.value; size=1 name=Music>
<OPTION selected>::::::::::::: Choose Your Song Here :::::::::::::</OPTION>
<OPTION value=http://url or path to your media>Artist - Song Title</OPTION>
<OPTION value=http://url or path to your media>Artist - Song Title</OPTION>
<OPTION value=http://url or path to your media>Artist - Song Title</OPTION>
</SELECT>

rename the id to what you want, and rename the reference to the id in your JS.

<SELECT id=cancion2 onchange=document.all.music.filename=document.all.cancion2.value; size=1 name=Music>
<OPTION selected>::::::::::::: Choose Your Song Here :::::::::::::</OPTION>
<OPTION value=http://url or path to your media>Artist - Song Title</OPTION>
<OPTION value=http://url or path to your media>Artist - Song Title</OPTION>
<OPTION value=http://url or path to your media>Artist - Song Title</OPTION>
</SELECT>

Notice "cancion2" is the new id for the second select box. "music" is still the id of the media player/plugin since there is only one copy. If you copy that, you have to rename the id also, and the references in the JS.

FWIW: The JS code you have looks a bit old. You may want to look into changing it to W3C DOM compatible code. The HTML is also invalid, since you need to surround attribute values with double quotes (").

eg: valid XHTML

Note all the tags are lower case and attribute values are in double quotes.

<select id="cancion2" onchange="document.all.music.filename=document.all.cancion2.value;" size="1" name="music">
<option selected>::::::::::::: Choose Your Song Here :::::::::::::</option>
<option value=http://url or path to your media>Artist - Song Title</option>
<option value=http://url or path to your media>Artist - Song Title</option>
<option value=http://url or path to your media>Artist - Song Title</option>
</select>

eg: W3C DOM compatible JS

Note: the document.getElementById('music') references the Element with ID of "music".

<select id="cancion2" onchange="document.getElementById('music').filename=document.getElementById('cancion2').options[document.getElementById('cancion2').options.selectedIndex].value;" size="1" name="music">
<option selected="selected">::::::::::::: Choose Your Song Here :::::::::::::</option>
<option value="http://url or path to your media">Artist - Song Title</option>
<option value="http://url or path to your media">Artist - Song Title</option>
<option value="http://url or path to your media">Artist - Song Title</option>
</select>

Explanation:

You have a media plugin with the ID "music", embedded in your HTML. Thus, you can reference it like another HTML Element via the DOM methods.

To reference an Element with a given id, DOM specifies:

document.getElementById();

You use this to retrieve the plugin Object, and then reference the attribute of the plugin called "filename" (which is the file to play).

document.getElementById('music').filename

You then make this equal to the selected Option value in the Select Element. Thus it changes the song being played.

[Dblevins]

Thanks but I think I've found a way round this by changing the id of the dropdown lists only.

I now have a different problem but I'll start a new thread for it.

Thanks all who tried to help

[MikoLone]

"tried changing one of the scripts ie
name=Music> & <OBJECT id=music to read audio instead but that didn't work either. Is that what you mean?"

That is what I meant. You would have to change the object id to something like music2 and cancion2 and then in the select tag you would have to change.

document.all.music2.filename=document.all.cancion2.value

That would make it so that the second dropdown would control e second player and so on.

Also it is good to change document.all to document.getElementById so that other browsers won't have a problem with it.

I am glad you got it fixed. Have fun.