Dynamically change embedded video source

Hey web wizards,

Is there anyone who can help me with the dreaded embedded video issue? I have code to embed video into my site using object for IE and embed for firefox. This works fine but now I also wish to dynamically change the source of the video depending on which link is clicked. I know how to acheive this but I believe that my source changing code for firefox is flawed

My code for IE which works great is :

<a href=“#” onclick = “document.all.player1.Filename = ‘new.wmv’;”> Link</a>

But for firefox and opera (which also seems to like <embed> rather than <object>) I have the code below:

<a href=“#” onClick = "document.embeds[‘p1’].src = (‘new.wmv’); ">Link</a>

A simple problem but one which has cost me hours of time already so any help would be much appreciated.

Well when I say Safari doesn’t like it, it does change the file but takes ages doing it.

Hey there,

Heres my workaround for this problem, safari still doesn’t like it though, has anyone got any ideas?

<title>FS Test</title>
<meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1”>
<script type=“text/javascript” language=“javascript”>

function tagname()
  	  if(navigator.appName !== "Microsoft Internet Explorer")
  	var VidArray = document.getElementsByTagName('OBJECT');
  	VidArray[0].innerHTML = ("&lt;embed src='CBL_SELCOPYi_Webex_SDE_Copybook.wmv' id ='p1' width='280' height='256' autoStart='true' uiMode='full' volume='256' mute='false'&gt;&lt;/embed&gt;"); 
			else if(navigator.userAgent.indexOf(' Safari/') &gt; -1)
			 document.embed['p1'].src = ('pond.wmv');
  	document.all.playera.Filename = ('CBL_SELCOPYi_Webex_SDE_Copybook.wmv');



<OBJECT id=playera height=230 width=230 classid=clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95>
<PARAM NAME=“AutoStart” VALUE=“True”>
<PARAM NAME=“Balance” VALUE=“False”>
<PARAM NAME=“DisplaySize” VALUE=“True”>
<PARAM NAME=“Filename” VALUE=“pond.wmv”>
<PARAM NAME=“Mute” VALUE=“False”>
<PARAM NAME=“SelectionStart” VALUE=“False”>
<PARAM NAME=“SelectionEnd” VALUE=“False”>
<PARAM NAME=“ShowControls” VALUE=“True”>
<PARAM NAME=“ShowAudioControls” VALUE=“True”>
<PARAM NAME=“ShowDisplay” VALUE=“False”>
<PARAM NAME=“ShowPositionControls” VALUE=“true”>
<PARAM NAME=“Volume” VALUE=“1”>
<PARAM NAME=“AudioStream” VALUE=“False”>
<PARAM NAME=“AutoSize” VALUE=“False”>
<PARAM NAME=“AnimationAtStart” VALUE=“False”>
<PARAM NAME=“AllowScan” VALUE=“false”>
<PARAM NAME=“AllowChangeDisplaySize” VALUE=“False”>
<PARAM NAME=“AutoRewind” VALUE=“True”>
<PARAM NAME=“BufferingTime” VALUE=“5”>
<PARAM NAME=“CaptioningID” VALUE=“”>
<PARAM NAME=“ClickToPlay” VALUE=“True”>
<PARAM NAME=“CursorType” VALUE=“0”>
<PARAM NAME=“CurrentPosition” VALUE=“True”>
<PARAM NAME=“CurrentMarker” VALUE=“True”>
<PARAM NAME=“DefaultFrame” VALUE=“mainframe”>
<PARAM NAME=“DisplayBackColor” VALUE=“True”>
<PARAM NAME=“DisplayForeColor” VALUE=“16777215”>
<PARAM NAME=“DisplayMode” VALUE=“1”>
<PARAM NAME=“Enabled” VALUE=“-1”>
<PARAM NAME=“EnableContextMenu” VALUE=“False”>
<PARAM NAME=“EnablePositionControls” VALUE=“true”>
<PARAM NAME=“EnableFullScreenControls” VALUE=“False”>
<PARAM NAME=“EnableTracker” VALUE=“true”>
<PARAM NAME=“InvokeURLs” VALUE=“False”>
<PARAM NAME=“Language” VALUE=“False”>
<PARAM NAME=“PlayCount” VALUE=“1”>
<PARAM NAME=“PreviewMode” VALUE=“False”>
<PARAM NAME=“ShowStatusBar” VALUE=“True”>
<PARAM NAME=“TransparentAtStart” VALUE=“False”>
<embed src=“pond.wmv” id =“p1” width=“280” height=“256” autoStart=“false” uiMode=“full” volume=“256” mute=“false”></embed>
<a href =“#” onclick =“tagname();”>Change Video</a>

One option is to give the <object> and <embed> elements an id and when a link is clicked to change the video or whatever, use getElementById() to change the element’s appropriate attribute to the new media file.