document.getElementById not working in IE. Why?

Question

edDev 0 Newbie Poster

15 Years Ago

First a little background. I have a client (in-house) who insists that our training pages (launched from within iframes on a parent page) be able to load .wmv files with variables for the width and height parameters so we don't have to recode when videos are switched. Flash videos are not an option.

I've searched the net and have received several suggestions and even code snippets from several sources but the only one that comes close to working is this one:

<html>
	<head>
    <style type="text/css">
<!--
.fontStyle {
	font-family: Verdana, Geneva, sans-serif;
	font-size: small;
	font-weight: bold;
	color: #67A2DC;
}

-->
    </style>
		<script type="text/javascript">			

			window.onload=function(){
				loadVideo();
			}
			
	
			function loadVideo()
			{
				
					if (parseInt(navigator.appVersion)>3)
						{
							if (navigator.appName == "Netscape")
							{
								winW = window.innerWidth;
								winH = window.innerHeight;
							}
					if (navigator.appName.indexOf("Microsoft") != -1)
							{
								winW = document.body.offsetWidth;
								winH = document.body.offsetHeight;
							}
			}
				
				var dimW = winW-50;
				var dimH = winH-20;
				var w1 = dimW.toString();
				var h1 = dimH.toString();
				
				
				
				if(document.getElementById("vidEmbed") != null)
				{
					
					document.getElementById("vidEmbed").src = "Welcome_1.wmv";
					document.getElementById("vidEmbed").style.width = w1;
					document.getElementById("vidEmbed").style.height = h1;
				}
				else if(document.getElementById("Player") != null)
				{
					document.getElementById("Player").style.width = w1;
					document.getElementById("Player").style.height = h1;
					document.getElementById("objectSrc").value = "Welcome_1.wmv";
				}


			}
		</script>

	</head>
<body><div>
<p><span class="fontStyle">Introduction<br>

</span>
  <object id="Player" width="100%" height="100%" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" style="border:0px;"> 
    
    <param name="autoStart" value="True">
    <param name="uiMode" value="full">
    <param name="volume" value="50">
    <param name="mute" value="false">
    <param name="URL" id="objectSrc" value="">
    <embed src="" id="vidEmbed" width="100%" height="100%" autostart="true" uimode="full" volume="50" mute="false"> </embed>
  </object>
</p>
</div>
</body>
</html>

I say close because it works just fine in Firefox (go figure) but doesn't appear to be working correctly in IE. IE just will not load the video using the "objectSrc" id. If I move the source video from the javascript into the actual object, then it loads and plays the video (it still doesn't resize the window correctly).

I've been in several forums and have poured over the code with several people and we just can't figure out why this code doesn't work correctly.

Can anyone here help?

Thanks,

M.

javascript

4 Contributors
10 Replies
1K Views
2 Days Discussion Span
Latest Post 15 Years Ago Latest Post by edDev

Airshow 416 WiFi Lounge Lizard

15 Years Ago

You could try an innerHTML approach rather than trying to reuse the object/embed with DHTML.

First rewrite the HTML as follows:

<body>
<p><span class="fontStyle">Introduction</span></p>
<div id="video">
  <object id="Player" width="100%" height="100%" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" style="border:0px;"> 
    <param name="autoStart" value="True">
    <param name="uiMode" value="full">
    <param name="volume" value="50">
    <param name="mute" value="false">
    <param name="URL" id="objectSrc" value="">
    <embed src="" id="vidEmbed" width="100%" height="100%" autostart="true" uimode="full" volume="50" mute="false"> </embed>
  </object>
</div>
</body>

Then in javascript,

var videoString = "<object id=\"Player\" width=\"%sW\" height=\"%sH\" classid=\"CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6\" style=\"border:0px;\">" +
	"<param name=\"autoStart\" value=\"True\">" +
	"<param name=\"uiMode\" value=\"full\">" +
	"<param name=\"volume\" value=\"50\">" +
	"<param name=\"mute\" value=\"false\">" +
	"<param name=\"URL\" value=\"%sURL\">" +
	"<embed src=\"%sURL\" width=\"%sW\" height=\"%sH\" autostart=\"true\" uimode=\"full\" volume=\"50\" mute=\"false\"></embed>" +
	"</object>";

(Not tested)

Then use global regular expression videoString.replace(.....) to replace %sW, %sH, %sURL with appropriate values and document.getElementById("video").innerHTML = .... to poke this HTML into the DOM.

Agreed, it shouldn't be necessary but it might just work.

You can do this within a if(){} condition such that it only applies to IE thus leaving your good FF etc. code intact, and also allowing videoString to be simplified (no need for "<embed ....>").

Airshow

Edited 15 Years Ago by Airshow because: n/a

almostbob 866 Retired: passive income ROCKS

15 Years Ago

<script type="text/javascript">
<!--//
 function setplay(thisfile,ww,hh) {
document.getElementById("MediaPlayer1").src=thisfile;
document.getElementById("MediaPlayer1").style.width=ww;
document.getElementById("MediaPlayer1").style.height=hh;
}
 //-->
</script>
<p><a href="http://www.microsoft.com/windows/windowsmedia/player/download/"><img alt="Get Windows Media Player" src="http://www.microsoft.com/windows/windowsmedia/images/logos/getwm/mp11_88x31_static.gif"width="88" height="31" border="0"></A><br>
<object id="MediaPlayer1" width=384 height=300 classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,0,02,902" standby="Loading Microsoft Windows Media Player components..." type="application/x-oleobject">
<param name="fileName" value="">
<param name="showControls" value="true">
<param name="PlayCount" value="0">
<param name="animationatStart" value="true">
<param name="transparentatStart" value="true">
<param name="autoStart" value="true">
<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" src="" name="MediaPlayer1" width=360 height=260 AutoStart=true></embed></object></p>
<a onclick='setfile("thisfile.wmv","480","300");' > Play thisfile </a><br>
<a onclick='setfile("thatfile.wmv","400","320");' > Play thatfile </a>

Edited 15 Years Ago by almostbob because: n/a

Troy III 272 Posting Pro

15 Years Ago

<html>
	<head>
    <style type="text/css">
<!--
.fontStyle {
	font-family: Verdana, Geneva, sans-serif;
	font-size: small;
	font-weight: bold;
	color: #67A2DC;
}

-->
    </style>
		<script type="text/javascript">			

			window.onload=function(){
				loadVideo();
			}
			
	
			function loadVideo()
			{
				
					if (parseInt(navigator.appVersion)>3)
						{
							if (navigator.appName == "Netscape")
							{
								winW = window.innerWidth;
								winH = window.innerHeight;
							}
					if (navigator.appName.indexOf("Microsoft") != -1)
							{
								winW = document.body.offsetWidth;
								winH = document.body.offsetHeight;
							}
			}
				
				var dimW = winW-50;
				var dimH = winH-20;
				var w1 = dimW.toString();
				var h1 = dimH.toString();
				
				
				
				if(document.getElementById("vidEmbed") != null)
				{
					
					document.getElementById("vidEmbed").src = "Welcome_1.wmv";
					document.getElementById("vidEmbed").style.width = w1;
					document.getElementById("vidEmbed").style.height = h1;
				}
				else if(document.getElementById("Player") != null)
				{
					document.getElementById("Player").style.width = w1;
					document.getElementById("Player").style.height = h1;
					//document.getElementById("objectSrc").value = "Welcome_1.wmv";
				
document.getElementById("Player").url = "Welcome_1.wmv";}


			}
		</script>

	</head>
<body><div>
<p><span class="fontStyle">Introduction<br>

</span>
  <object id="Player" width="100%" height="100%" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" style="border:0px;"> 
    
    <param name="autoStart" value="True">
    <param name="uiMode" value="full">
    <param name="volume" value="50">
    <param name="mute" value="false">
    <param name="URL" id="objectSrc" value="">
    <embed src="" id="vidEmbed" width="100%" height="100%" autostart="true" uimode="full" volume="50" mute="false"> </embed>
  </object>
</p>
</div>
</body>
</html>

Remove red lines!
Set the <param name="uiMode" value="none"> If you don't want player controls to appear on your media.

Edited 15 Years Ago by Troy III because: n/a

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 1 · 2009-10-01T06:34:55+00:00

edDev,

Try Bob's method first. It looks good to me.

I thought there was a way to address both Object and Embed but it is several years since I had to do it. I'm sure I must have forgotten more than I remember these days.

Airshow

edDev 0 Newbie Poster · Answer 2 · 2009-10-01T19:23:31+00:00

Sorry guys, went home ill yesterday lunchtime. Am checking from home now - called out sick again.

We need to be able to use variables for the width and height. Bob's code appears to require actual pixel values or am I misreading what I'm seeing?

Thanks,

M.

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 3 · 2009-10-01T22:02:21+00:00

From his photo, I think that Bob is big enough to look after himself, but since I am around and Bob isn't, I hope he will forgive me for answering on his behalf.

Bob's script is written as a function, setplay , such that thisfile , ww and hh are specified when it is called, eg. setplay('myvid1.wmv', '320', '240'); .

I think you will find that IE will play ball with it as posted, but Moz browsers need 'px' to be specified explicitly.

<script type="text/javascript">
<!--//
function setplay(thisfile,ww,hh) {
  document.getElementById("MediaPlayer1").src=thisfile;
  document.getElementById("MediaPlayer1").style.width=ww+'px';
  document.getElementById("MediaPlayer1").style.height=hh+'px';
}
//-->
</script>

Alternatively, leave Bob's code as is giving you the freedom to call with setplay('myvid1.wmv', '320px', '240px'); ,
or setplay('myvid1.wmv', '100%', '100%'); ,
as required.

If width and height need calculating, then

var width = expression;
var height = expression;
setplay('myvid1.wmv', width+'px', height+'px');

Airshow

edDev 0 Newbie Poster · Answer 4 · 2009-10-02T19:34:24+00:00

Ok, I'm obviously missing something because for the life of me I can't get this work. First, what is setfile? Do you mean setplay?

<a onclick='setplay("oracleWelcome_1.wmv","480","300");' > Play thisfile </a><br>
<a onclick='setfile("thatfile.wmv","400","320");' > Play thatfile </a>

. Second, even though you've got the <a...> tags there, I am not seeing a hyperlink.
Third, where do I call the setplay function? In the <body>?
I've tried in the body and as window.onload=function(){setplay(somefile.wmv, 480, 300);} but still don't see anything playing.
So obviously, I'm not seeing something...

Thanks,

M.

edDev 0 Newbie Poster · Answer 5 · 2009-10-02T22:26:38+00:00

FANTASTIC!! THANK YOU! Now, I just noticed that it's not playing in Safari. Any idea why that might be?

Thank you,

M.

almostbob 866 Retired: passive income ROCKS · Answer 6 · 2009-10-03T02:13:34+00:00

safari is apple,
if a mac does the mac have windows media installed
from the "get windows media player" link included in the original script, that part of it works anyway

edDev 0 Newbie Poster · Answer 7 · 2009-10-03T02:23:27+00:00

safari is apple,
if a mac does the mac have windows media installed
from the "get windows media player" link included in the original script, that part of it works anyway

Hey Bob, thank you for replying. I thought I had closed this thread as solved. I opened this safari question under a new thread when I thought I closed this one.

My Mac is hosed - been fighting with Apple for four months now to get it fixed (don't believe the commercials - my PC's been up and running the whole time!). In the meantime, I had someone else try it from his mac and he didn't even see the object trying to be built or the link to Windows media player so... back into the code I go.

Again, thank you and Troy. I hope you both have great weekends!

M.