PDA

View Full Version : Adding SWF Video to my web page


Michelle Carries
02-19-2011, 05:48 PM
Hello, I am a student, learning Dreamweaver and XHTML. I am creating a website and I have been trying to insert an SWF video to my web page with the copy on the left, and the video on the right. On the style sheet, I created a left column and a right column inside the content div. After the video is loaded, all the types in the content div turn blue in the code section, including the video script. Then, the video plays automatically. How to I correct these problems. I want the video to start playing when I click on the play button.
These are the styles:
#leftColumn {
float: left;
width: 365px;
border: 3px #E00

}
#rightColumn {
float: right;
width: 365px;
}
The video width is 320px by 280px height. PLEASE HELP!!!!!

johnMoss
02-19-2011, 07:27 PM
Post your html & CSS so we can look at it. Sounds like you've missed a closing tag somewhere.

Michelle Carries
02-19-2011, 08:50 PM
Hello John,
Thank you for helping. Here is my CSS style. ALso, the wrapper div is not working either. I have counted the open and closing divs and added an additional closing divs at the end, but nothing is working. If you need anything else, plese letme know.

<style type="text/css">

body {
background: #FF9;
margin: 0;
padding: 0;
text-align: center;
}
#wrapper {
width: 780px;
margin: 0 auto;
text-align: left;
}

h1, h2, h3 {color: #E00;
}
#content {
margin-top: 0px;
padding-top: 0px;
}
#leftColumn {
float: left;
width: 365px;
border: 3px #E00

}
#rightColumn {
float: right;
width: 365px;
}
#footer {
clear: both;
margin-top: 15px;
margin-bottom: 12px;
text-align:right
}
#navbar a {
font-size: 100%;
font-weight: bold;
text-transform: bold;
text-decoration: none;
color: #660;
padding: 4px;
margin: 2px;
font-style: normal;
}
#banner { height: 150px;
}

</style>

johnMoss
02-19-2011, 09:00 PM
Post your html also.
When you do, use the tags on the reply box in this forum. See the #, <> above?


html goes here



css code goes here


:)

johnMoss
02-19-2011, 09:02 PM
One thing I see real quick, are using "ID" or "class" for your divs? Your css is all set to ID.

Michelle Carries
02-19-2011, 09:25 PM
John,
I am sending you the entire "body" code as well.
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>

<body>
<div id="wrapper">

<div id="banner">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="150" id="FlashID2" title="webbanner">
<param name="movie" value="lacayebanner.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="lacayebanner.swf" width="780" height="150">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>

<div id="navbar">
<p align="center"> <a href="index.html">Home</a><a href="production.html">Our Work</a><a href="contact.html">Contact Us</a></p><hr width="85% /></div>

<div id="content">
<h1 align="center">Welcome to our site</h1>
<div id="leftColumn">
<h2><em>A</em>bout Us</h2>

</p> <strong><em>W</em></strong>e are a Miami-based video production company, that can help guide a client from concept, to scripwriting,to shooting, and editing. Our specialties include production of television commercials, video production for Tv shows, infomercials, social gatherings and multimedia design<br/> At Lacaye Production inc., we bring you personal service with exceptional quality, and competitive pricing. We are very budget minded and can work within the parmeters given by our cleints. Small or large, your project will receive our full attention. Below is a vieo gallery of our work. Please go to our Production page to check out our ads.</p>
</div>

<div id="rightColumn">

<br/><br/>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="320" height="280" id="FlashID" title="openvideo">
<param name="movie" value="homeopen.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="homeopen.swf" width="320" height="280">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</p>
</div>
</div>
<br/><br/><br/>
<div id="footer">Lacaye Production Inc. &copy;2011</div>
</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
swfobject.registerObject("FlashID2");
</script>
</body>
</html>
I already downloaded the latest flash player. and the video is playing.

johnMoss
02-19-2011, 09:49 PM
You left out the top of the HTML page. What version of html are you using?

johnMoss
02-19-2011, 09:56 PM
<!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" />
<title>Untitled Document</title>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>
<body>
<div id="wrapper">
<div id="banner">
<object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="150" id="FlashID2" title="webbanner">
<param name="movie" value="lacayebanner.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you donít want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="lacayebanner.swf" width="780" height="150">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</p>
</div>
</div>
<br/><br/><br/>
<div id="footer">Lacaye Production Inc. &copy;2011</div>
</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
swfobject.registerObject("FlashID2");
</script>
</div>
</body>
</html>

johnMoss
02-19-2011, 10:02 PM
<!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" />
<title>Untitled Document</title>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>
<body>
<div id="wrapper">
<div id="banner">
<object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="150" id="FlashID2" title="webbanner">
<param name="movie" value="lacayebanner.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you donít want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="lacayebanner.swf" width="780" height="150">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</p>
</div>
</div>
<br/><br/><br/>
<div id="footer">Lacaye Production Inc. &copy;2011</div>
</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
swfobject.registerObject("FlashID2");
</script>
</div>
</body>
</html>

johnMoss
02-19-2011, 10:09 PM
I'm doing something wrong on the post, but here's the deal:

1) go to line 39 and fix your HR 85% tag by adding a closing " to the 85% value. It's missing.
2) Your wrapper div is unclosed. Go down to line 87 & add a closing div tag.

Michelle Carries
02-20-2011, 06:29 PM
John,
Thank you so much.:-D I can't believe that those two little things could cause so much problems. I kept putting the closing div in the wrong place. I have a lot to learn! Thank you again. Now I have to figure out how to get the video not to play automatically.

johnMoss
02-20-2011, 06:54 PM
You're welcome, glad I could help. On your video, where did it come from? A program you created it in perhaps? Go there & reset it. For example if you created it in flash:

In the first frame, add this code: stop();

For other simplified swf creators you'll find it in the 'general section' for file settings.