Welcome to WebmasterWorld Guest from 54.242.9.97

Forum Moderators: open

Message Too Old, No Replies

Flash IE Firefox Problems

     
2:27 am on Nov 4, 2009 (gmt 0)

New User

5+ Year Member

joined:Nov 4, 2009
posts: 2
votes: 0


Ok So I have a problem. I am working on my personal website. I do not claim to be a web expert by any means. What I am trying to do is add a video to my site for my demo reel.
The problem I am having is the flash video will show up and play in firefox but it will not work in IE.

Here is a link to the page in question.

<snip>

here is the code I have for the flash part of my site:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" id="motion_graphics_reel_v004" width="450" height="367">
<param name="movie" value="motion_graphics_reel_v004.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#000000" /> <embed src="video/motion_graphics_reel_v004.swf" quality="high" bgcolor="#000000" name="motion_graphics_reel_v004.swf" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" width="450" height="367"></embed>
</object>

I have no idea why its not working I have been fighting this all day. Any help you guys could give me would be great.

Here is the code for the entire page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>XS Pixels by Christopher Shearin</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<style type="text/css">
<!--
a:link {color: #009d04} /* unvisited link */
a:visited {color: #013e03} /* visited link */
a:hover {color: #04b908} /* mouse over link */
a:active {color: #009d04} /* selected link */

body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #000000;
background-image:url(xs_pixels_background_2.png);
background-repeat:repeat-y;
background-position:center;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;

}
.twoColFixLtHdr #container {
width: 760px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: transparent;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
text-align: center;
}


.twoColFixLtHdr #header {
margin-top: 25px;
height: 150px;
background: transparent;
background-image:url(xs_pixels_banner_v002.png);
background-repeat:no-repeat;
background-position:center;
padding:0px;
border:none;

}
.twoColFixLtHdr #header h1 {
margin-top: 0px; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 0px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
.twoColFixLtHdr #navbar1 {

width: 760px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
background: transparent; /* the background color will be displayed for the length of the content in the column, but no further */
border:none;
margin-top:1px;
margin-right:0px;
padding-top: 0px;
}
.twoColFixLtHdr #mainContent {
width: 550px;
padding: 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
background: transparent;
border:none;
font-size:10pt;
font-family: Lucida Sans Unicode;
color:white;
text-align:center;
margin-right:auto;
margin-left:auto;

}

-->
</style><!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixLtHdr #navbar1 { width: 760px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixLtHdr #navbar1 { padding-top: 0px; }
.twoColFixLtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body class="twoColFixLtHdr" onload="MM_preloadImages('home_button_highlight.png','demo_button_highlight.png', '3D_button_highlight.png','2D_button_highlight.png','motion_button_highlight.png', 'resume_button_highlight.png','about_button_highlight.png','email_button_highlight.png')">
<div id="container">
<div id="header"><!-- end #header --></div>
<div id="navbar1"><a href="index.html"><img src="home_button_base.png" alt="Home" style="border-style:none" onmouseover="this.src = 'home_button_highlight.png';" onmouseout="this.src = 'home_button_base.png';" width="67" height="30" /></a><a href="demo.html"><img src="demo_button_base.png" alt="Demo Reel" style="border-style:none" onmouseover="this.src = 'demo_button_highlight.png';" onmouseout="this.src = 'demo_button_base.png';" width="102" height="30" /></a><a href="3d_gallery.html"><img src="3d_button_base.png" alt="3D Gallery" style="border-style:none" onmouseover="this.src = '3d_button_highlight.png';" onmouseout="this.src = '3d_button_base.png';" width="101" height="30" /></a><a href="2d_gallery.html"><img src="2d_button_base.png" alt="2D Gallery" style="border-style:none" onmouseover="this.src = '2d_button_highlight.png';" onmouseout="this.src = '2d_button_base.png';" width="103" height="30" /></a><a href="motion.html"><img src="motion_button_base.png" alt="Motion Graphics" style="border-style:none" onmouseover="this.src = 'motion_button_highlight.png';" onmouseout="this.src = 'motion_button_base.png';" width="152" height="30" /></a><a href="resume.html"><img src="resume_button_base.png" alt="Resume" style="border-style:none" onmouseover="this.src = 'resume_button_highlight.png';" onmouseout="this.src = 'resume_button_base.png';" width="83" height="30" /></a><a href="about.html"><img src="about_button_base.png" alt="About" style="border-style:none" onmouseover="this.src = 'about_button_highlight.png';" onmouseout="this.src = 'about_button_base.png';" width="67" height="30" /></a><a href="mailto:email@example.com"><img src="email_button_base.png" alt="E-mail" style="border-style:none" onmouseover="this.src = 'email_button_highlight.png';" onmouseout="this.src = 'email_button_base.png';" width="84" height="30" /> <!-- end #navbar1 --></a></div>
<div id="mainContent">
<p>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" id="motion_graphics_reel_v004" width="450" height="367">
<param name="movie" value="motion_graphics_reel_v004.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#000000" /> <embed src="video/motion_graphics_reel_v004.swf" quality="high" bgcolor="#000000" name="motion_graphics_reel_v004.swf" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" width="450" height="367"></embed>
</object>
</p>
<!-- end #mainContent --></div>
<!-- end #container --></div>
</body>
</html>

again I am not a web guy. I had a friend of mine help me piece this code together.

I am also not using dream weaver or any other HTML generators. I am doing this all by hand in notepad.

Please Help me!

Thanks so much in advance!

[edited by: eelixduppy at 4:09 pm (utc) on Nov. 5, 2009]
[edit reason] specifics [/edit]

6:16 pm on Nov 4, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
posts:7999
votes: 0


Welcome aboard xspixels, the URL will get nixed, see TOS [webmasterworld.com]. But the code you posted is a good starting point.

I am also not using dream weaver

Someone has, or it was originally generated in DW, it has all the DW-generated comments and Javascript - but the point is moot.

The immediate solution looks pretty easy, but please take a moment to review the comments that follow. Note the difference here:

<param name="movie" value="motion_graphics_reel_v004.swf" />

.....
<embed src="video/motion_graphics_reel_v004.swf"

Moz (FireFox) browsers use the embed element, IE uses object. Obviously the movie param is pointing to a different, and probably wrong, location for the .swf

However -Please note: This is an "old school" embedding method, and is also invalid HTML. The embed element is invalid inside the object element. If you move the <embed> outside <object>, it will sometimes display two instances of the Flash so it is done this way to "trick" the two browsers into displaying only one while supporting both. I can't believe DW/Flash still publish this code.

A much better way is to use SWFObject [code.google.com]. The way it works is you have a "placeholder" image - a screen capture of the Flash - and if Javascript/Flash are supported, the actual .swf is written to the div/p containing the placeholder. This addresses accessibility and cross browser issues with valid html, and is really very easy to implement. As a hand coder, you should be able to pick it right up.

See post #6 [webmasterworld.com] for a simple tutorial example.

6:33 pm on Nov 4, 2009 (gmt 0)

New User

5+ Year Member

joined:Nov 4, 2009
posts: 2
votes: 0


hey rocknbil,

thanks for the reply

The majority of the code for the page was generated for me by a friend of mine. She may have used DW but im not sure. Maybe thats why her code is hard to understand?

anyways I finally got a piece of code to work
it follows here:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" id="tech" width="450" height="367">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="video/motion_graphics_reel_v004.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#000000" /> <embed src="video/motion_graphics_reel_v004.swf" quality="high" name="tech" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" width="450" height="367"></embed>
</object>

I think you identified what my problem was. The code above I found on another site and pluged in my values and it worked in IE but then it didnt work on FF so I double checked it and I left out my seccond reference of my .swf
so it works now, but you are correct this is not the proper way of handeling this situation. I will check out the tutorial you linked to. Hopefully I can get this into valid HTML eventually. right now I was just concerned with getting the videos up, so I can get a new job.

Thanks again,
An update to come with valid HTML
oh and sorry about the URL

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members