Internet Explorer Eolas changes and the Flash plugin

Microsoft recently announced (again) that they will be changing the way Internet Explorer handles plugins (more info here).

So how does all of this affect you being a web developer?

Basically, the functionality changes work like this:

When using an applet, object, or embed tag to insert a plugin into an HTML document, that plugin will not allow user interaction until the user clicks on it. Microsoft calls this process “Activating an ActiveX Control’s Interface.

In the case of the Flash plugin, it means that your Flash movies will not work until a user ‘activates’ it first by clicking on it. The details are still a bit fuzzy, and I can’t find a developer preview of IE 6 or IE 7 that include this new functionality to test this new functionality (If you find one, please let me know) (see below). This is a slight improvement over the previous ‘fix’ which was a small dialog prompt for each ActiveX control on a page. Now you just have to click on each control to activate it (if you want to interact with it).

Microsoft says “We believe over the next six months, most customers will be running copies of Internet Explorer with this behavior.” The changes will be rolled into IE 6 through security updates to Windows, and included in IE 7.

But that’s so stupid! How do I fix it?

Thankfully, Micosoft offers a fairly easy way around all this nonsense: Embed your Flash movies using Javascript. Head over to the FlashObject page* and start using it (you should be using it anyway, everyone else is!). You may also want to retrofit your old websites that don’t use Javascript since this change will affect every website. If you are using quicktime, you can always use my QTObject script which works the same way that FlashObject does, but for the Quicktime plugin.

UPDATE (1-22-2006): Apple has recently released a new script that is similar to my QTObject script to prepare people for the upcoming IE changes.

* UPDATE (2-21-2006): After testing with a patch (search the page for ‘English’ to find the download link) that Microsoft released recently released (and with some help from Dan Freeman) it turns out that you must have ‘Disable Script Debugging’ checked in the Advanced options of IE in order for the controls to be activated as they are embedded. If you have Script debugging on (it’s off by default) then you will still need to activate each ActiveX control on the page.

Also: Macromeida/Adobe has a new Active Content Developer Center.

UPDATE (3-1-2006): Microsoft has released the update. There’s more information and a nice list of possible issues you might have after installing the update on this Microsoft KB article page.

UPDATE (3-24-2006): Looks like Microsoft is set to roll out the Eolas changes to everyone around April 11th. Get ready.

UPDATE (3-29-2006) Microsoft announced their future plans for releasing the patch to customers today.

UPDATE (5-9-2006): Adobe posted what looks like a very rare edge case regarding an out of date jscript.dll causing users to always activate ActiveX controls, even if they are embedded using Javascript in the proper way.

Web standards compliant Javascript Quicktime detect and embed

Due to the popularity of my FlashObject embed, I decided to create a helpful little Javascript file for doing detection and embedding QuickTime movies.

Embedding QuickTime movies in websites presents many of the same problems as embedding Flash. Since QuickTime relies on a third party plugin, your users will need to have this plugin installed before they can view your content. If they don’t have the plugin, they will be greeted by either an AcitveX install window (Internet Explorer) or an ugly ‘broken plugin’ image on other browsers. I prefer using Javascript to detect the presence of plugins because it gives you more control over what your users see when they visit your site. Most web browsers handle plugin installs terribly, often giving the user cryptic looking placeholders (broken puzzle pieces) or strange sounding legal notices on ActiveX install dialogs (of which people may have been trained to always say ‘no’ to since the same dialog box will often install spyware).

Anyway, enough chit-chat. On to the Javascript:

To use the QTObject embed, you simply create a new QTObject, add the parameters you want, and then write it to the page. The script will check to see whether the QuickTime plugin is available and write the embed code to the page or the alternate content if the user doesn’t have the required plugin. Here is an example of what a simple movie embed would look like (I used a fun little video I found floating around the Internet as a sample movie, but it can be any .jpg, .gif, .png, or even another .mov file.): (View Example)

var myQTObject = new QTObject("", "bushfinger", "320", "255");
myQTObject.addParam("autostart", "false");

In this example the ‘myQTObject.addParam()‘ isn’t needed, but it’s a nice addition that will keep the movie from starting before the user figures out what they are looking at.

The parameters from left to right are the path to the mov file, the ID of the mov file, the width, and then the height of the file. If you are showing the QuickTime controls, you need to add 15 pixels or so to the height of the movie or the controls will be pushed down and the user won’t be able to see them.

If you want to do some more advanced embedding, such as the method Apple uses on their QuickTime site, your code would look something like this: (View Example)

var myQTObject = new QTObject("bushplaceholder.jpg", "bushfinger", "320", "255");
myQTObject.addParam("href", "");
myQTObject.addParam("target", "myself");
myQTObject.addParam("controller", "false");

This uses a few extra parameters that allow you to use a placeholder image that will load in the place of your movie until the user clicks on it. Your movie would then load in the place of the image and start when it has loaded enough to start playing. You simply replace the mov source from the first example with your placeholder image (you remembered to add 15 pixels to the height of the image to account for the QuickTime controls, right?) and then an extra few parameters to tell the QuickTime embed where to find the real movie, the target QuickTime object, and finally telling it to hide the controls before the real movie loads.

There is also the option of redirecting the user to another page if there is no QuickTime plugin found by using this code: myQTObject.redirect = "upgradepage.html";, and there is a built in bypass of the detect script by including detectqt=false in the query string when you request the page. This link is included in the ‘upgrade’ notice so if for some reason a user has QuickTime installed but the Javascript detect fails, they can still attempt to view the QuickTime content.

Also, be sure you use this in combination with <noscript> tags just in case some of your users have Javascript disabled.

That’s it! Since it uses Javascript to create the embed and object tags, it will validate as XHTML 1.0 (strict or transitional). Please note that it will not work with pages sent as application/xhtml+xml since it uses innerHTML and document.write(). Another note: I’m not checking for the version of the QuickTime plugin installed, and I couldn’t find any older QuickTime players for testing, so I’m not sure how this will treat users who are using QuickTime 4 to view content that requires QuickTime 6. I seem to remember QuickTime having an auto-update feature or some built in notification if you need to upgrade, so I’m not too worried about it, but if anyone has some experience in this area, I’d love to hear how this embed method behaves under those circumstances.

I’ve tested this on IE 6, 5.0, 5.5 on PC, Firefox on Mac and PC, and Opera and Safari on Mac. It has worked great every time, but everyone knows there can always be little bugs that pop up, so if anyone finds something wrong with the code, let me know.

Download source and example files (1.09MB)

UPDATE (02-11-2005): Just fixed a few bugs – one that was giving problems if the user didin’t have QuickTime installed on Internet Explorer for PC, and adjusted the default Alternate text.

UPDATE (02-16-2005): Not sure how something like this slipped past, but Thiago found a little bug in the VB Script that was giving some problems in IE on a PC. The files have all been updated.