homepage Welcome to WebmasterWorld Guest from 54.167.176.106
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / Flash and Shockwave
Forum Library, Charter, Moderator: open

Flash and Shockwave Forum

    
Flash IE Firefox Problems
xspixels




msg:4018723
 2:27 am on Nov 4, 2009 (gmt 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]

 

rocknbil




msg:4019141
 6:16 pm on Nov 4, 2009 (gmt 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.

xspixels




msg:4019153
 6:33 pm on Nov 4, 2009 (gmt 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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / Flash and Shockwave
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved