-1

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.

4
Contributors
10
Replies
11
Views
7 Years
Discussion Span
Last Post by edDev
Featured Replies
  • [CODE]<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 = … Read More

0

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 by Airshow: n/a

0
<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 by almostbob: n/a

0

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

0

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.

0

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

Edited by Airshow: n/a

0

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.

1
<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 by Troy III: n/a

0

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

Thank you,

M.

0

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

0

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.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.