Wickham's HTML & CSS tutorial

Flash video examples

Warning: These examples may not work in all browsers. Sound and video is a difficult subject to code. The examples work in IE6, IE7 and IE8 with ActiveX and in Firefox, Opera and Safari for Windows without javascript but I have not tested other browsers. The following examples are just an introduction; they are not a complete tutorial.

View this page in Firefox as IE and Google Chrome may block the Flash SWF file. It always used to display in IE and Google Chrome but recently it may not, probably due to the coding of the SWF file which is very old.

IE needs different codes from other browsers. Tutorials on the web usually nest two methods together to suit most browsers. If the solutions below don't work for you, use Google to find a solution that does. Some research, googling and trial and error may be required. The examples below work on IE6, IE7, IE8, Firefox, Opera and Safari for Windows but may not work on other browsers, especially on an Apple Mac.

Item 1 works on (probably) all browsers, including old ones, because it incorporates the embed tag, but does not validate. Item 2 does validate but probably does not work on older browsers. A computer needs to have Flash software installed for Item 2. So it seems there is no perfect solution. I am unable to test on all browsers so I have shown the codes that work on IE6, IE7, Firefox, Opera and Safari for Windows. I suggest that you try out each code and see which works best for you and the probable computer capabilities of your target viewers.

The page does not validate as I have included an example with the embed tag which the validator considers out of date, including all the attributes used inside the embed tag. However, the embed tag is still useful and often used. It seems that the validator expects coding to be up to date and also that computers and browsers are modern and equipped to show Flash which of course isn't the case because many people still use old computers.

See w3schools tutorial for general information on the embed, bgsound and object tags.

View in Firefox and IE6 to see the differences. In general IE7 and IE8 display like Firefox. IE refers to IE6, IE7 and IE8.

Some of the examples are provided just to show problems, others show solutions that work in Firefox, IE6, IE7 and IE8. Use the example that suits you
red icon problems gold icon warning: works in some situations or needs care to display as you wish green icon OK in Firefox, IE6, IE7 and IE8

Methods that don't validate

1a gold icon This method uses a nested embed tag inside an object tag. The embed tag is needed for Firefox as this object tag code does not work in Firefox. The embed tag is also for older browsers. It uses a clsid and codebase for the object tag and a macromedia plugin for the embed tag. It does not validate because of the embed tag. (It's a really annoying video and you may need to turn your sound volume down! Click on the background to see the hand with the pin and pop the balloons.)

The code is:-

1b gold icon This method also uses a nested embed tag inside an object tag but the object tag has been simplified and doesn't have the classid and codebase linking to macromedia.com. The embed tag is needed for IE and Firefox in this case although Opera and Safari for Windows show the videos with only the object tag. The embed tag is also for older browsers. It uses a macromedia plugin for the embed tag. It does not validate because of the embed tag. (It's a really annoying video and you may need to turn your sound volume down! Click on the background to see the hand with the pin and pop the balloons.)

The code is:-

Methods that do validate

2a gold icon This method uses just one object tag without the embed tag and will validate but I don't think it works in older browsers. This object tag code does work in Firefox (the object tag codes in the previous items do not). It uses application/x-shockwave-flash for the object type instead of the classid and codebase and has no embed tag which means the code can validate. A computer needs to have Flash Player software installed. (It's a really annoying video and you may need to turn your sound volume down! Click on the background to see the hand with the pin and pop the balloons.)

The code is:-

<div style="width: 500px; margin: auto;">
<object type="application/x-shockwave-flash"
style="width: 500px; height: 450px; margin: auto;"
id="VideoPlayer" data="yourvideo.swf">
<param name="allowScriptAccess" value="sameDomain" >
<param name="movie" value="yourvideo.swf" >
<param name="quality" value="high" >
<param name="scale" value="noscale" >
<param name="bgcolor" value="#ababab" >
<p><a href="http://www.adobe.com/go/getflashplayer">Install Adobe Flash For Richer Experience</a></p>
</object>
</div>

The alternative content advising the viewer to install Adobe Flash shows if the viewer does not have a Flash plugin.

2b gold icon This method shown by Dizi and called the SWFOBJECT method uses two object tags, the first object tag is for IE and the one in a conditional comment is for browsers NOT IE. A computer needs to have Flash Player software installed. See swfobject code for details.

The code is:-

<div style="width: 500px; margin: auto;">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" style="width: 500px; height: 450px;">
<param name="movie" value="images/popballoons.swf">
<param name="bgcolor" value="#bcbcbc">
<object data="images/popballoons.swf" style="width: 500px; height: 450px; background: #bcbcbc;" type="application/x-shockwave-flash">
<param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer">
<li><param name="bgcolor" value="#bcbcbc">
</object>
</object>
</div>

2c gold icon This method shown in a post by ricrod uses javascript. It works in IE, Firefox, Safari, Chrome and Opera and it does validate.

The javascript file is ricrod.js and the page head section needs this markup:-

<script type="text/javascript" src="ricrod.js"></script>
<script type="text/javascript"> var FO = { movie:"images/popballoons.swf", width:"500", height:"450", bgcolor:"#bcbcbc",
UFO.create(FO, "HappyNewYear");
</script>

and the body markup is:-

<div style="width: 500px; height: 450px; margin: auto;" id="HappyNewYear">
<noscript><p><span style="color: #ff0000;">Your javascript/ActiveX is disabled but you need it for this item.</span></p></noscript>
</div>

Flash in HTML5/CSS3

3 gold icon See Flash in HTML5

Generally

I have noticed that I have two versions of Adobe Flash Player, one is Adobe Flash Player 10 Plugin downloaded via Firefox and when downloaded via IE I got Adobe Flash Player 10 ActiveX so both show in Add or Remove Programs (WIN XP) or in Programs and Features (Vista). I've never understood why this is necessary. I found that item 1b above needed Adobe Flash Player 10 ActiveX in IE although item 2 played the video in IE with only the Adobe Flash Player 10 Plugin.

You can download software to add controls and other features to the Flash video. One program is FLV Player which has a free FLV Player explained on the download.cnet.com website.

Notes

View/Source or View/Page Source in browser menu to see all html code.

The body of this page has margin: 20px. Most divs have border: 1px solid #black and padding: 3px coded in the stylesheet tutorial.css.

The page is in a containing div with width: 730px; and margin: auto; so that it centralises at large screen resolutions.

A lot of codes have been put in html tags in my examples rather than in a stylesheet or in a style in the head. I have done this for the convenience of the viewer so that most (but not all) codes are in one place and the stylesheet does not always have to be viewed in addition. When coding your own page you should try to put as much as possible in a stylesheet and link with id or class to the html tag.

Remember that when a Doctype is included above the head before the html tag (as it should be) then the overall width of a div is its defined width plus borders, margins and padding widths.

If there are differences between Firefox and IE6 that cannot be overcome with one code, code first to get a satisfactory solution in Firefox then create an IF style which will only apply to IE6:-
for instance, if margin-top: 20px; in Firefox needs to be margin-top: 30px; in IE6 then put the following in the head of the html/xhtml page:-

or if there are many different styles, create a separate stylesheet:-

IE6 will contain just the amended styles such as div { margin-top: 30px; } and others (no head or body tags or Doctype).

When looking at a page source for this site you may see code like <p>Little Egret</p> instead of <p>Little Egret</p>. The code < is because in that instance the code is to be displayed on the screen as text. If the < symbol was placed in the code a browser would activate the code and it would not display as text. Such code is not normally required when writing html code tags which are to be activated.

top | Sitemap | prev