A few weeks back some Schematic developers were working on a video player for NBC Universal*. They found a very odd bug: when watching a video, if they hit F5 to reload the page, or closed the popup window, if they were using IE, the audio would keep playing until the video ended or until they closed all their open Internet Explorer windows.
After spending a few hours investigating, Danny noticed that when they weren’t using SWFObject to embed the swf, they didn’t have the problem. So they called me late on a Sunday night to help figure out what the problem was. To make a long story short, the issue was this:
When you embed a swf using innerHTML in IE 6, and stream content to the Flash Player, when the user leaves the page (either by reloading it, hitting the back button, or closing the browser window with another browser window open), the audio will keep playing until the video ends or until the user closes all of their open IE windows.
Working with another developer, we found a very odd resolution at first – if we removed the Id attribute from the object tag, it would fix the problem – no more ghosted audio. The downside to this was that it also broke ExternalInterface calls going into the swf. I tried many other ways to reference the swf, but it seemed that without that Id attribute there, Flash Player wasn’t able to add the Javascript hooks to the page when the plugin was loaded.
After that I started playing with all kinds of different methods including using document.write instead of innerHTML, (which fixed the issue) but the drawback of using this was so great I kept looking for another way to fix it. Without innerHTML, I would have to change the way SWFObject works, move the placement of the Javascript code on the page, and then add more code to clear the alternate content before writing the swf to the page. All of this made that option unacceptable. I also tried using DOM methods to embed the swf file, but that ended up being such a headache I quickly gave up on that as well. Using the DOM to embed plugins is the fastest way to a headache: you think CSS is bad cross browser? Try getting plugins to work…
At this point I gave up, and e-mailed a couple of Adobe contacts. Luckily I’ve had a lot of contact with them lately because of the Devnet article and the whole FlashObject name change thing, so I figured they owed me anyway ;).
I put together a test case (HUGE thanks to Gene Dymarskiy at IBCTV for setting me up with a stream from one of their servers to test against – Gene sent an e-mail to the SWFObject mailing list the day after we found this bug, so was also eager to find an answer to it) and sent the details over to Adobe and waited for them to check it out. A while later, I got some Javascript code back from a Flash Player engineer that with a little tweaking, fixed the problem. Here’s the code that I’ve added to SWFObject:
/* fix for video streaming bug */
deconcept.SWFObjectUtil.cleanupSWFs = function() {
var objects = document.getElementsByTagName("OBJECT");
for (var i=0; i < objects.length; i++) {
for (var x in objects[i]) {
if (typeof objects[i][x] == 'function') {
objects[i][x] = null;
}
}
}
}
if (typeof window.onunload == 'function') {
var oldunload = window.onunload;
window.onunload = function() {
deconcept.SWFObjectUtil.cleanupSWFs();
oldunload();
}
} else {
window.onunload = deconcept.SWFObjectUtil.cleanupSWFs;
}
As you can see, it simply checks the page for object tags when the page unloads and loops through their properties looking for functions, and if it finds one, it sets it to null. I’m assuming this is cleaning up some leftovers Flash Player inserts because of the new ExternalInterface stuff, but I haven’t looked too deep into the cause of it.
I’ve just updated SWFObject to v1.4.1 to include this code. If you are using streaming content, this update is a must – if not, you can hold off as this was the only change to the code.
UPDATE: I realized this morning that the title of this post is slightly misleading – this is not a Flash Player bug, but a bug in Internet Explorer 5 and 6 in the way the browser handles the Flash Player. The issue doesn’t exist in IE 7.
UPDATE 2: It seems that there is still one issue remaining with this that can’t be solved. I haven’t tested it extensively, but it appears that when you leave a page using a link from within a Flash movie, the audio will continue, but if you leave the page using the back button or using an HTML link, the audio will be stopped. The bug was introduced when Microsoft introduced the Eolas changes, so it may be fixable in a future update. I’ll post more info here as I get it.
UPDATE: The latest SWFObject (v1.4.2) fixes all of the known isues with this, so if you are still seeing the problem, go update and you should be fine.
* If you want to check out the player, which has TONS of great content loaded into it, you can try these urls:
The player was built so it can be re-skinned on the fly for all the different networks or shows. Dig around a bit, there’s so much great content in there – especially some of the Conan and SNL stuff.