Playing Media In An Embedded Player?

fltcoop1 · #1 (**permalink**) 05-26-2005, 03:48 PM

Hi,

I'm having a problem with using an embedded player on a website. I created the embedded player fine, but I don't know how to have links to video files I have on a helix server play in the embedded player. Everytime I try it just opens a new external player. I want the links to play inside the embedded player I create. How do I achieve such a goal?

Thanks!
-Joe

Till · #2 (**permalink**) 05-27-2005, 02:04 PM

Can not be done with HTML only.

You have to reload the page your player code is on and substitute the part where you link to the file/URL to play.

Till

john-formby · #3 (**permalink**) 05-28-2005, 06:42 PM

Hi,
I did this example for someone else a few weeks ago and I think that it is the same thing you need. It will allow you to play files through an embedded media player using links.

Code:

<html>
<head>
<title>Embed Media Player</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type"text/javascript">
function clip1()
{document.Player.fileName="CLIPS/YOUR_FIRST_CLIP_NAME.MPG";
if(document.getElementById("mediaPlayerMozilla"))
	document.getElementById("mediaPlayerMozilla").innerHTML = '<embed type="application/x-mplayer2" pluginspage="http://microsoft.com/windows/mediaplayer/en/download/" showControls="1" width="280" height="256" src="CLIPS/YOUR_FIRST_CLIP_NAME.MPG"></embed>';}

function clip2()
{document.Player.fileName="CLIPS/YOUR_SECOND_CLIP_NAME.MPG";
if(document.getElementById("mediaPlayerMozilla"))
	document.getElementById("mediaPlayerMozilla").innerHTML = '<embed type="application/x-mplayer2" pluginspage="http://microsoft.com/windows/mediaplayer/en/download/" showControls="1" width="280" height="256" src="CLIPS/YOUR_SECOND_CLIP_NAME.MPG"></embed>';}
</script>

</head>

<body>

<a href="javascript:clip1()">CLIP 1</a></p>
<p><a href="javascript:clip2()">CLIP 2</a></p>
 
<table cellpadding="0px" cellspacing="0px" border="0px">
<td>
<object id="Player" classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"
codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"
standby="Loading Microsoft Windows Media Player components..."
type="application/x-oleobject" width="280" height="256">
      <param name="ShowStatusBar" value="true">
      <param name="autostart" value="true">
      <param name="ShowAudioControls" value="false">
      <param name="ShowDisplay" value="false">
      <param name="ShowGotoBar" value="false">
      <param name="ShowTracker" value="false">
      <param name="ShowPositionControls" value="false">
      <param name="CaptioningID" value="capText">

<div id=mediaPlayerMozilla>
<embed type="application/x-mplayer2" pluginspage="http://microsoft.com/windows/mediaplayer/en/download/" showControls="1" width="280" height="256"></embed>
<div>
</object>
</td>
</tr>
</table>

</body>
</html>

Just change CLIPS/YOUR_FIRST_CLIP_NAME.MPG and CLIPS/YOUR_SECOND_CLIP_NAME.MPG to the location of your clips.

Hope this helps,

John

wlanni · #4 (**permalink**) 11-08-2005, 05:56 PM

I know this is way old, but I was searching for a solution, found one, implemented it, and thought I'd post it here if someone else dropped by looking.

Code:

<html>
<head>
<title>Embed Media Player</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type"text/javascript">
function PlayMedia(clipName){
	document.getElementById("player").innerHTML='<object id="mediaPlayer" width="320" height="240" '
      +'classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" '
      +'codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" '
      +'standby="Loading Microsoft Windows Media Player components..." type="application/x-oleobject">'
      +'<param name="fileName" value="'+clipName+'">'
      +'<param name="autoStart" value="true">'
      +'<param name="showControls" value="true">'
      +'<param name="ShowStatusBar" value="1">'
      +'<param name="loop" value="false">'
      +'<embed type="application/x-mplayer2" '
      +'pluginspage="http://microsoft.com/windows/mediaplayer/en/download/" '
      +'showcontrols="true" width="320" height="240" '
      +'src="'+clipName+'" autostart="true" loop="false">'
      +'</embed>'
     +'</object>'
}
</script>

</head>

<body>
<ul>
<li><a href="http://link.to.your.clip.here.mpg" onclick="PlayMedia(this.href);return false">CLIP 1</a></li>
<li>><a href="http://link.to.different.clip.here.mpg" onclick="PlayMedia(this.href);return false">CLIP 2</a></li>
</ul>

 
<div id="player">
 <object id="mediaPlayer"
	                  codeBase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"
	                  type="application/x-oleobject"
	                  width=320
	                  height="240" 
	                  standby="Loading Microsoft Windows Media Player components..." 
	                  classid=CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95>
                  	<PARAM NAME="fileName" VALUE="">
                  	<PARAM NAME="autoStart" VALUE="true">
                  	<PARAM NAME="showControls" VALUE="true">
                  	<PARAM NAME="ShowStatusBar" VALUE="1">
                  	<PARAM NAME="loop" VALUE="false">                                            
                  <embed
                  	type="application/x-mplayer2"         
                    pluginspage="http://microsoft.com/windows/mediaplayer/en/download/" 
                    showcontrols="true" 
                    width="320" 
                  	height="240"
                  	src="" autostart="true" 
                  	loop="false">
                  </object>
		</div>

</body>
</html>