Dynamically change embedded video source

JavaScript
1

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.

2

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

3

Hey there,

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

<head>
<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');
			}
  	else
  	{
  	document.all.playera.Filename = ('CBL_SELCOPYi_Webex_SDE_Copybook.wmv');
  	}
}

</script>
</head>

<body>

<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=“BaseURL” VALUE=“”>
<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>
</OBJECT>
</br>
<a href =“#” onclick =“tagname();”>Change Video</a>
</body>
</html>

4

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.