Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Music on site - "Now Playing" and Video Player help

Status
Not open for further replies.

webmaniacal

Technical User
Aug 24, 2006
47
0
0
US
hello all I am new to this site I hope I am posting in the correct forum if i am not please direct me to the appropriate forum.

I am working on a site that requires two things: first off, I need a radio station to stream on the site (I have the stream locations, etc) - I would like to have the stream play through an embedded media player on a page that would also display what is currently playing and other getID info -- does anyone know how this is accomplished?

Also, I have a page of music videos which I would like the visitor to be able to select a video by clicking on it in the list (not dropdown list) and the video would play in the media player that is embedded on that page - I have researched this and there is much regarding audio but I am wondering about videos. I know how to embed a player to play one file but I can't seem to get the "onClick" (I'm assuming) correct for the selection from a list.

Any information or direction to the appropriate reading material, etc. would be greatly appreciated. Thank you!
 
Embedding video is a little odd, especially because of all the different browser issues. If I was doing it, I'd re-write the whole player in order to switch videos. There may be a different way, but this one seems the simplest to me.
Code:
<html>
<head>
<title></title>
<script type="text/javascript">
function newVideo(vid){
  document.getElementById("videoBox").innerHTML = "Here put a whole new object tag and the like.";
}
</script>
</head>
<body>

<ul>
<li><a href="javascript:newVideo('vid2.mov');">Play New Video</a></li>
... more on list
</ul>

<div id="videoBox"><object>etc...</object></div>
</body>
</html>
 
this is very interesting but i am only half following it as i try to envision this... esentially the visitor would see a list of vids and when they select a video a player would appear (on the page??) and play it. then when they select a different video the player would go away and another player would replace it...is that the concept? sorry if I appear daft.
 
I'll make a mock-up for you with youtube videos...
example
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<title></title>
<script type="text/javascript">
function newVideo(vid){
	if (vid=='smp'){
		document.getElementById("videoBox").innerHTML = '<object width="425" height="350"><param name="movie" value="[URL unfurl="true"]http://www.youtube.com/v/EvEpONK2zRM"></param><embed[/URL] src="[URL unfurl="true"]http://www.youtube.com/v/EvEpONK2zRM"[/URL] type="application/x-shockwave-flash" width="425" height="350"></embed></object>';
	}else if (vid=='digg'){
		document.getElementById("videoBox").innerHTML = '<object width="425" height="350"><param name="movie" value="[URL unfurl="true"]http://www.youtube.com/v/fLxySs-9uaY"></param><embed[/URL] src="[URL unfurl="true"]http://www.youtube.com/v/fLxySs-9uaY"[/URL] type="application/x-shockwave-flash" width="425" height="350"></embed></object>';
	}else if (vid=='scfr'){
		document.getElementById("videoBox").innerHTML = '<object width="425" height="350"><param name="movie" value="[URL unfurl="true"]http://www.youtube.com/v/C8Mkm3QtwgE"></param><embed[/URL] src="[URL unfurl="true"]http://www.youtube.com/v/C8Mkm3QtwgE"[/URL] type="application/x-shockwave-flash" width="425" height="350"></embed></object>';
	}else if (vid=='japan'){
		document.getElementById("videoBox").innerHTML = '<object width="425" height="350"><param name="movie" value="[URL unfurl="true"]http://www.youtube.com/v/9Js5KIsmOTU"></param><embed[/URL] src="[URL unfurl="true"]http://www.youtube.com/v/9Js5KIsmOTU"[/URL] type="application/x-shockwave-flash" width="425" height="350"></embed></object>';
	}
}
</script>
</head>
<body>

<ul>
<li><a href="javascript:newVideo('smp');">Simpsons: Intel Inside</a></li>
<li><a href="javascript:newVideo('digg');">Diggnation: dude</a></li>
<li><a href="javascript:newVideo('scfr');">Stephen Colbert fights a Rancor</a></li>
<li><a href="javascript:newVideo('japan');">Wierd Japan</a></li>
</ul>

<div id="videoBox">
	<object width="425" height="350"><param name="movie" value="[URL unfurl="true"]http://www.youtube.com/v/EvEpONK2zRM"></param><embed[/URL] src="[URL unfurl="true"]http://www.youtube.com/v/EvEpONK2zRM"[/URL] type="application/x-shockwave-flash" width="425" height="350"></embed></object>
</div>
</body>
</html>
 
this is great but i am having difficulty determining where i put the actual value of the video from the root directory... i have been playing with it but this really is great thank you VERY MUCH!!
 
In order to use different videos you would want to change the object tags completely. Depending on the file type of the video, the code will be different.

Try googling for the file type and the word embed. Alternately, let me know what the file type is and I'll see if I can find the code to embed it.
 
Guide here.

The code is:
Code:
<object NAME="Player" WIDTH="320" HEIGHT="240" align="left" hspace="10" type="application/x-oleobject" CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">

<param NAME="URL" VALUE="yourfile.wmv><param>
<param NAME="AUTOSTART" VALUE="false"></param>
<param name="showControls" value="true"></param>

<embed WIDTH="320" HEIGHT="240" align="left" hspace="10" SRC="yourfile.wmv" TYPE="application/x-oleobject" AUTOSTART="false">

</embed>

</object>

You need to use that (customized for your purpose) instead of the objects that I have in the example I provided.
 
that works great thank you very very much you are awesome!!
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top