<< Back Home
Universal XHTML Object Code For Flash, Quicktime, Windows Media and Embedded Video Markup
or "How to create valid XHTML Markup for multimedia objects using validated object code"
Flash Animation:A looping animation of a woman dancing is displayed here. Please update your browser if possible to one of the newer types.
(Note: Please be patient while the sample movie or Flash file of Dancing Girl loads above - 145 kb)
The Multimedia Flash display, or solution shown above, is supported in the following browsers:
Internet Explorer 5-7, Mozilla/Firefox (all), Netscape 6-8+, Opera 6-9+, Safari 1-2+, and Internet Explorer for MAC 5.2
In addition, many older browser will get either the animation or a special alternate message you supply in the code below that tells them what they are seeing or expect to see, or to upgrade. This supplies you with the ability to meet the XHTML Web Standards and Accessibility provisions, as well as supports the 508 multimedia suggested standards and guidelines. This also includes support for people with disabilities, older browser, alternate browser, and alternate viewing devices who may not be able to view your movie, Flash, or music display in the browser, but may need alternate messages of what that content displays. In addition, the following browsers have been tested and support the messages shown in the obvject tags: IE3-4, Netscape 4 series, Opera 3-5, Lynx, and many others.
***Yet Another Update (4/07/07)*** : Added style control to wrapper divs rather than on the object tags, so better control over which browser sees which object. This fixes Safari, too, which seems to still show two players. Object tag is also given a style-controlled width and height now.
***Yet Another Update (12/08/06)*** : Added Internet Explorer 7 bug fix! Below you will see that I have reworked the CSS and code to address special issues found with the Internet Explorer 7 browser. The problem with IE 7 is that it now recognizes all CSS selectors that most other browsers, like Mozilla, recognize. This meant that it was nearly impossible to hide the plugin from #IE 7. Whats worse, IE 7 does NOT read the STar hack in CSS or "* html" which allows us to hide items from all browsers but IE 5 and 6. To fix this I added in my special Internet Explorer 7 Hack, which allows us to use CSS to show the Active X control object to IE 7 but no other browsers. So, this new solution now works in an even wider array of agents! Yea!!!)
***Update (05/06/05)*** : Added MAC Safari bug fix! Below you will see that I have added a "css hack" that addresses the Safari 1.2-1.3 browser issue where Safari tries to display BOTH IE and non-IE objects. The "hack" show below hides the IE version of the Flash player from Safari users only)
PC Browsers (majority of browsers)
Its been very hard for web designers to move to XHTML and Web Standards and yet, find markup that both validates as good XHTML while supporting all the plugins available online. We can no longer use the "embed" element now, which makes it especially difficult. After reviewing some solutions online, it became really obvious how many people online have missed the really obvious solution to this whole problem. Many developers had stumbled on the two version of object code required to display the Active X versions of say Flash for Internet Explorer 3-6, and as well, the plugin version of object code that replaces the embedd element. But noone had yet really understood that the solution to giving each browser type the version it needed was simply done using display:none for each object tag, based on a simple browser CSS hack. Thats basically what Ive done here for PC users using Internet Explorer 3-6, Netscape 6-7.2, Mozilla/Firebird, Opera 6-7.6, and a few others for PC. Ive also moved all that "object embedded in an object" crap and placed both object versions (the one for IE and the one for the rest of the browsers) stacked in the markup beside each other, but use simple style sheet hiding techniques and hacks to deliver what each agent needs. Even addresses the Mac version of IE and its weird requirement for the plugin version. And it can be used for streaming media, and anything you embedd in a web page! And as well, allows you to build in Accessibility code for browsers that dont have or cannot support objects!! And finally, yes, thats right folks...it validates!!!
Again, the xhtml code used to display the Flash file above allows one to apply both the Active X for Windows IE control for Flash and the Plugin Non IE/windows version for those agents. The style hack above also hides the active x version from IE for MAC, so it can get the object or player if needed. IE 3 and 4, though nearly dead browsers, will both get a version of the hidden alternative text when trying to view the flash objects, so users know what the Flash object does. Users who disable the Active-X or plugin for security reasons, or who have it blocked, or who's agent does not support the object element, including style sheet 'hiding' rules, will all see various kinds of alternative text supporting the object and the information it contains, or at least, will receive assistance in knowing where to get the plugin or control, if they desire to get that information, which you can provide via the object text. But this solution should work in a large variety of browsers, including Mozilla, IE 6, Netscape and Opera.
Macintosh/Apple Browsers
Mac browsers include a wide range of old and new agents. Many have been deprecated and replaced the last five years, with Internet Explorer 4-5 and now Safari for Mac. Microsoft has abandoned (long ago) support for IE 4-5 on Mac, so this browser as of 2005 is approaching less than .1% of all browsers used world-wide. Its newer replacement of choice by Mac users is Safari, which is based on the Konqueror "engine". If you are designing sites with Flash or media for a large majority of Mac viewers, you will want to focus on Safari. Its engine now is in flux, so may change again, but using 1.2 and 1.3, you do have unique challenges using xhtml and object code. Same for IE4-5 for Mac which from logs Ive seen, is at most 1/3 of Mac users. Because Safari as is, is maybe 1-2% or all browser users world-wide at most, its still a tiny group. But Ive developed hacks below to address the object code so it works with those users as well. One of the problems with IE is that its read as IE but uses the plugin (not actice x) version of the Flash object. A simple CSS hack addresses that. In Safari, its more complex as Safari seems to read both active x and plugin flavors, and has full css support for both IE 6 and Mozilla style hacks. The resolution was a very unique style hack below that only Safari can see, and which hides the IE version of the active x Flash object from view. As of Safari 1-1.2 this solution works correctly.
Netscape 4 series
Finally, Netscape 4 is one of those troublesome browsers that is still around but causing problems. In future releases of my code, I will be showing you how to design "linearized" accessible and standardized XHTML web pages that deliver clean text and link lists to this dying browser demographic we call
Netscape 4 Series. For now, though, lets look at the problem with Flash and how I fixed it in the code below. Netscape 4 and several of its earlier versions, have distinct problems with the object tag. First of all they dont support the Active-x version of teh object tag so I needed to find a way to send this agent the plugin version and hide the active-x version. I found that even using a class or id on the latter object, connected to a style sheet rule with display:none, that I was not able to hide the active-x IE version of the player. When I viewed this test page initially in Netscape 4.8, what I got (with the plugin installed and the Flash playing the plugin version) was two copies of the object tag in the page with the first one showing the broken "puzzle piece" representing a missing plugin control for Netscape, and the plugin version, which was animated correctly. What I needed was a way to HIDE the active-x object in Netscape 4 using a style. I found that the only way to successfully pull this off was putting an inline style around on both the object tag and the param tag that held the path to the Flash .swf file, which was no good, as that meant it was now hidden from IE for PC (versions 5 and 6). Ahhhh.....the solution to getting this code to work in Netscape 4 was simply to wrap an outer "span" element around the active-x object tag itself and connect a style hack for Netsape 4 only to that with a style class (see below). Because that style hack is only recognized by Netscape 4, it meant that only Netscape 4 was able to hide the span tag which held the object, and the object tag for IE was hidden from Netscape 4. With that applied and an additional minor style hack to hide the top non-flash text for Netscape, it works perfectly, and now all your Netscape 4 users, not to mention IE for Mac, Netscape 6-7, Mozilla and Firefox, Opera, and of course all IE for PC users, can get a great copy of your animated Flash, Video, or other Multimedia object in your page. And of course, its XHTML and valid code! Yea!!!! (note: If you try and open up Netscape and view this page, you will get errors since Netscape has problems with the "code" and pre" tags that hold the demobnstration code below. To test that this code works for your Flash or movie, copy it below and paste into your web page with the uri to your movie inserted into it. View that in Netscape 4 and it should work. I have a test page with this code in it and it works great! Good Luck!)
Internet Explorer 7
As is mentioned above, Internet Explorer is a "problem browser" once again. Even though the IE team has done a tremendous job in cleaning up this agent (as far as security, CSS, and web standards go), its still a highly proprietary user agent, meaning, it uses stuff no other browser ueses. This means we need to have ways to hide stuff and reveal stuff based on this new browser. Unlike IE 6, this browser now supports nearly all of the same CSS selectors that the other browser do (child selectors, etc.). In older IE 6 these allowed us to hide things as they were not supported by IE6. That means, anything we used to hide items from IE, now no longer works! Don't worry, Im here to the rescue!!!! Ive developed a special Internet Explorer 7 Style Sheet CSS "hack" that is ONLY seen by IE 7. Is that way-cool???? What this code does is help us reveal the Active X Flash control for itself, but only itself. We can still use the Star HAck to show things to IE 6. But the combination of all hacks below allow us to show IE 7 the active x control now and not the plugin used by the others. This means now our Multimedia solution is compatible with nearly 99.9% of browsers!!!! Here in Texas we say....YEEE-HAAAA!!!!!
(Please give this Texas programmer some credit and link to my site whenever possible, if you find my codework valuable!! ...we are not all "hillbillies" on this side of the world! We can be cowboys, ride bulls, and help ya'll with your technology problems, too! Yee-hawww!)
Use the code below for your Flash Projects:
<style type="text/css" media="screen">
/*<![CDATA[*/
/*----------------FLASH STYLES--------------------*/
object {
width:300px;
height:200px;
}
/*First hide all flash movies for all browsers that support some kind of style.
Note: alterative text for non-flash browsers is shown by default until hidden
below for two classes of flash-capable browsers*/
#flash_alternate,#flash_plugin,#flash_activex {
display:none;
}
/* IE 5 fix */
#flash_plugin {
display:none;
voice-family:"\"}\"";
voice-family:inherit;
display:block;/*Set ALL OTHER BROWSERS to see plugin*/
}
/* Stokely Hack (fixes Safari, IE6 and IE 7 height issues) */
/* This hides plugin from IE7 but shows it for Mozilla and all other non-IE browsers */
html*#flash_plugin {
[display:block;/* Mozilla < 1.01 and Netscape 6-7 only */
display:block;/* Safari for Mac only */
]display:none/* IE 7 only */
}
.dummyend[id]{clear: both;}
/* This shows activex for IE7 but hidden from all others. Also, hide from Mac IE */
/*\*/
html*#flash_activex {
[display:none;
display:none;
]display:block;
}
.dummyend[id]{clear: both;}
/**/
/* This allows IE 6 to see active x without Mozilla and others. Also, hide from Mac IE */
/*\*/
* html #flash_activex {
display:block;
}
/*end*/
/*Add extra rules here to hide special features from older or selective agents*/
/*This hides the non-flash message div from Netscape 4 (and older), and this rule is only seen by that agent*/
.hidefromnetscape4,body div #flash_activex {
/*/*//*/visibility:hidden;display:none;/*end*/
}
/*--------------------------------------------------*/
/*]]>*/
</style>
<div id="flash_alternate" class="hidefromnetscape4">
<strong>Non-Flash Users:</strong>...alternative non-flash text here for browsers that dont support styles, nor objects of any kind...you might add a description of what this feature does or a colorful static graphic
</div>
<!-- Internet Explorer Users -->
<div id="flash_activex" class="hidefromnetscape4">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" width="300" height="200" id="activex" standby="loading movie..." title="Flash Active-X Version" name="activex" type="application/x-shockwave-flash">
<param name="movie" value="flash_example.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#FFFFFF" />
<strong>Internet Explorer Users:</strong>...add alternative non-flash text here for browsers that support the active x but its disabled or they dont have the active-x control...
</object>
</div>
<!-- Non-Internet Explorer Users -->
<div id="flash_plugin" >
<object type="application/x-shockwave-flash" data="flash_example.swf" width="300" height="200" id="plugin" standby="loading movie..." title="Flash Plugin Version" name="plugin">
<param name="movie" value="flash_example.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#FFFFFF" />
<strong>Non-Internet Explorer Users:</strong>...add alternative non-flash text here for browsers that support the plugin but its disabled or they dont have the plugin...
</object>
</div>
Note: The code here works for Quicktime, Real, and Windows Media Video as well, which is embedded into the web page. Just use the same structure but add in your video's url path and parameters as needed. You may have to play with height and width to allow some video controls, like Quicktime VR, to be seen correctly.
QUICKTIME MOVIE EXAMPLE!!! - I have added a small quicktime example using the same script above but with a different set of parameter tags and mime-type. Just click the link to view the page and do a "View Source" on the web page to get the code!
- Another fine "Stokely Solution" for the web community at large. Enjoy! - Mitchell Stokely, USA
send comments
- Mitchell Stokely, USA
