Latest thinking

Flash detection and the Document Object Model

Published: 14 August 2006

TagsTags: , , ,

By: Rob Smith

Comments: 2

At Tinderhouse we recently needed to developed a mechanism for handling the detection of the Adobe Flash Player plug-in, and altering the content of a webpage in the event that embedded Flash movies cannot be displayed. Our approach consists of three components that combine to create a concise, reusable and non-intrusive strategy that does not require any JavaScript outside of the document header.

Detect and replace

1. The Adobe Flash Player Detection Kit - The Adobe Flash Player Detection Kit consists of a JavaScript file which provides, amongst others, a function called DetectFlashVer that takes three arguments relating to the required Flash plug-in version. This function returns true if the viewer's browser has the Flash Player installed at the given version or later. The example webpage provided in the Adode distribution demonstrates this functionality by including some inline JavaScript at the point at which a Flash movie is to be displayed. This script uses a simple 'if' statement that outputs either the Flash movie, or a message prompting the viewer to download Flash.

2. The Document Object Model (DOM) - Our approach differs from the toolkit distribution in the way that we use the DOM to dynamically replace content within the webpage structure. Although interacting with the DOM may be perceived as complicated by many, the JavaScript required is far from it. Consider the following JavaScript used to perform the conditional replace. The Flash movie in question is wrapped in a div with the id 'movie_container': -

// Determine if Flash is installed
var hasReqestedVersion = DetectFlashVer(8, 0, 0);

// Get placeholder
var d = document.getElementById('movie_container');

// Replace content if required
if (!hasReqestedVersion) {
	d.innerHTML = "<img src=\"/images/no_flash.jpg\" />";
}

The call is made to the DetectFlashVer function and, in the event that Flash is found not to be installed, the content of the 'movie_container' div is replaced with an image.

3. Document load events - The inclusion of this JavaScript, and the JavaScript from the Adobe Flash Player Detection Kit is made in <script> declarations in the header of the document. This highlights a mistake made by many developers when programming with the DOM for the first time involving the point at which calls to the model can be made. Including the JavaScript in the header of the page means that it will be called before the page is loaded, and therefore document.getElementById('movie_container') will not return our div. Instead, the JavaScript code should be placed in a function and called after the page loads by setting a load event. Again, this is far from complicated: -

function checkflash(){

        // Determine if Flash is installed
	var hasReqestedVersion = DetectFlashVer(8, 0, 0);

        // Get placeholder
	var d = document.getElementById('movie_container');

        // Replace content if required
	if (!hasReqestedVersion) {
               d.innerHTML = "<img src=\"/images/no_flash.jpg\" />";
        }
}

// Check for Flash after page has loaded
window.onload = checkflash;

Common questions

Can I place static content on the page and dynamically replace it with a Flash movie instead? No. Whilst Firefox will allow you to do this, Internet Explorer highlights this as a security threat. You cannot dynamically embed an object onto a page after it has loaded.

Why does Internet Explorer still prompt to install the Flash plug-in, even though the page has been dynamically updated to remove Flash content? When a page loads, the classid and codebase parameters of the Flash movie's <object> tag informs Internet Explorer that the plug-ins required for the page are not installed. Even though the JavaScript subsequently replaces the content, Internet Explorer will still indicate the browsers deficiency. If this is not desirable, you can omit the codebase and classid parameters from the <object>.

Conclusion

This detect and replace method is extremely fast to implement and is arguably more desirable than intrusive plug-in installation pop-ups for pages where the Flash content is not critical. See it in action at www.dmccontracts.co.uk.

Comments on: Flash detection and the Document Object Model

Comment

just use UFO:

http://www.bobbyvandersluis.com/ufo/

Fransjo Leihitu commented 638 days ago
Comment

There are indeed many other ways of achieving the same results. The approach outlined in this article demonstrates how easy it is for even the beginner to write their own code using the DOM without the need for third party JavaScript, highlighting common mistakes such as accessing the DOM before the page has completely loaded and the security issues raised by IE.

Rob Smith commented 638 days ago