Flash-Detection Triple-Threat
![[ Macromedia Flash ]](https://perishablepress.com/wp/wp-content/images/2007/misc-chunks/macromedia-fash.png)
In our previous article, Alternate JavaScript Slideshow for SlideshowPro, we present an elaborate method for providing alternate content specifically for SlideshowPro.
Although the method points toward a more generalized adaptation, its overall functional implementation remains focused on the presentation of slideshows.
Overview
This article explores the generalization of the previously defined method for providing alternate JavaScript content when Flash support is not detected. Using Carl Yestrau’s excellent Flash-detection script, Flash Detect, we will outline a general approach for supporting the following browser configurations:
- Browser supports the required version of Flash
- Excellent. This is the ideal situation. Your Flash-based content will be displayed as intended.
- Browser supports Flash, but has not upgraded to the required version
- Okay. In this situation, you could serve either JavaScript content or retro-Flash content (i.e., Flash content that requires a lesser version of Flash). Detection is also provided for virtually any version of Flash, enabling delivery of multiple movie alternatives.
- Browser does not support Flash, but does support JavaScript
- Not bad. Non-Flash browsers will receive alternate JavaScript content. User’s won’t know what they’re missing.
- Browser does not support JavaScript, but does support Flash
- For Flash content that does not require JavaScript to function, the browser will display the Flash content as intended, assuming sufficient Flash version. When the version of Flash is insufficient, non-Flash users will see either retro-Flash content, animated gif content, or static image content, depending on your preference.
- Browser supports neither JavaScript nor Flash
- Worst case. Even so, all hope is not lost. In this situation, visitors will see either animated gif content, or static image content.
The Setup
The central component of this method is Carl Yestrau’s all-purpose Flash-detection script, Flash Detect. After a quick read through the documentation, include the script in your web pages:
<script src="http://domain.tld/path/to/flash_detect.js" type="text/javascript"></script>After including the external JavaScript file, it is time to configure the code that will be placed into the <body> of your (X)HTML webpage. Here is the general structure of the code we will be using:
<script type="text/javascript">
<!--//--><![CDATA[//><!--
if (flash.ver[8]) {
document.write(
'<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">' +
'<param name="movie" value="path/ver8-movie.swf" />' +
'<embed src="path/ver8-movie.swf" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />' +
'<\/object>'
);
} else if (flash.ver[7]) {
document.write(
'<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0">' +
'<param name="movie" value="path/ver7-movie.swf" />' +
'<embed src="path/ver7-movie.swf" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />' +
'<\/object>'
);
... (additional versions) ...
} else if (flash.installed) {
document.write(
'<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,0,0">' +
'<param name="movie" value="path/ver5-movie.swf" />' +
'<embed src="path/ver5-movie" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />' +
'<\/object>'
);
} else {
... (JavaScript content) ...
}
//--><!]]>
</script>Okay, let’s have a look at the code. First, the function checks for the current version of Flash (currently v.8). If your Flash movie requires a different version, change the value 8 in the first if statement and also in the the first instance of the <object> tag (it appears in the URL string for the codebase attribute). You will also want to configure the remainder of this first if statement with additional parameters and attributes according to your specific requirements. Also, don’t forget to edit the movie path in both param and embed elements.
Next, if the function fails to detect the first specified version of Flash (i.e., 8), it will check for the version specified in the second, if else statement (version 7 in our example). As with the initial if statement, go ahead and edit the two instances of the version number, 7, to correspond to your alternate Flash content. If you are only serving one helping of Flash content, and would like to simply provide some JavaScript as the alternate content, simply delete the entire if else statement.
The process of detecting variously indicated versions of Flash will continue through each subsequent if else statement until the requirements are met. To add alternate-content support for additional versions of Flash, simply extrapolate the pattern of if statements ad infinitum. Otherwise, delete the text that says “… (additional versions) …” (as well as the blank lines above and below) and continue on to the next paragraph.
After the function is finished checking for specific versions of Flash, it proceeds with an else if (flash.installed) statement, which detects for the presence of Flash support in general by checking for any Flash version 4 or better. This enables you to provide some ancient Flash movie as a fallback for people with older versions installed. Simply edit the usual properties, add the required parameters, and edit the path to your Flash-version-3 movie. Otherwise, if you do not require such functionality, delete the entire “if else” statement.
Finally, if none of the previously specified conditions are met, the function resorts to the “else” statement, which, if triggered, will execute your choice of JavaScript as the alternate content provided for that particular browser. Anything could be placed here. If you do not anything specific in mind for JavaScript to do, you could simply include some good ol’ (X)HTML markup via document.write(). The choice is yours, but remember that the point of all of this is to provide alternate content to visitors that do not support the required version of Flash.
noscript Support
Of course, the code we have covered thus far relies entirely on JavaScript to work. If browsers support JavaScript, the previous code is all you need to ensure that everyone is served something special, whether it be Flash or JavaScript content. As for those without JavaScript support, there are essentially two types: those with Flash support and those without Flash support. Using a little <noscript> action, we provide for each of these cases such that:
- Browsers without JavaScript and without the required version of Flash receive static (X)HTML content, generally a few images or an animated gif or something. Your choice!
- Browsers without JavaScript that do support the required version of Flash receive the corresponding Flash content.
..and here is the generalized <noscript> code:
<noscript>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0">
...
<param name="movie" value="path/slideshow.swf" />
...
<embed src="http://domain.tld/path/to/slideshow.swf" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
...
<img src="http://domain.tld/path/to/alt/image-01.jpg" alt="first alternate image served for non-Flash browsers" />
<img src="http://domain.tld/path/to/alt/image-02.jpg" alt="second alternate image served for non-Flash browsers" />
<img src="http://domain.tld/path/to/alt/image-03.jpg" alt="third alternate image served for non-Flash browsers" />
...
</object>
</noscript>In this case, those without JavaScript support must have Flash version 7 or better to see the Flash content. Because JavaScript is not supported, there is only one opportunity to provide visitors with Flash content. Thus, it may be in your best interest to display a Flash movie that is as ancient as possible. As before, you will need to edit the various parameters, attributes, and paths for this code to function as intended. Also, remember to remove the various ellipses, which are provided for clarity. Finally, replace and/or edit the alternate image elements according to your specific needs. Or, if you prefer, replace the series of images with a nice, animated gif via:
<img src="http://domain.tld/path/to/alt/slideshow.gif" alt="Animated GIF Slideshow" />Last Words
The primary purpose of all this nonsense is to provide designers and developers with a method to help ensure universally synchronous multimedia content. This method is not restricted to Flash, but may be adapted rather easily to support additional media, such as QuickTime and other video formats. Further, this article is intended for reference purposes only. There may indeed be other, mutually effective methods for accomplishing similarly useful results. That’s all for now — God bless!
2 responses to “Flash-Detection Triple-Threat”
The link in the second paragraph to the "Flash Detect 3" script is not very useful — there is no mention of the Flash Detect script anywhere on the target page. Please advise..
Yes, apparently the author of the script has redesigned his site or something.. perhaps he will connect the dots at some point in the future..
until then, you can grab a copy of the script here.