Flash Activation: Browser Comparison

Each of the major browsers has now implemented a feature where Adobe Flash content does not run by default, but each of the browsers has a slightly different implementation and user interface. This guide will help outline the similarities and differences between browsers so that web developers can provide the best experience. Another guide is available to assist website authors in migration away from Flash.

In each browser, the decision to enable Flash is made by users on a per-site basis. When a site attempts to use Flash, the browser will prompt the user in some way and give the user an opportunity to enable Flash for that site.

Each of the browser vendors has a roadmap about the future of Flash and changes to the user experience. The Firefox Flash roadmap includes links to roadmaps and posts from other vendors.

UI Comparison

Mozilla Firefox

In-page UI is displayed when the site attemps to use Flash. An icon also appears on the left side of the location bar. The user can click on the Flash object or the location bar icon to activate Flash.

User have the choice to allow Flash just for the current session, or to remember that choice:

Google Chrome

In-page UI is displayed when the site attempts to use Flash without fallback content.

A user can click the plugin element to show a prompt for allowing Flash.

If the site provides fallback content for an object element, Chrome will display that content and will not prompt the user to enable Flash. If a Flash element is not visible to the user, the user will have no visible prompt. On any site, a user can click the information icon on the left side of the location bar to open site information and allow Flash on that site.

Microsoft Edge

In-page UI is displayed when the site attemps to use Flash. An icon also appears on the right side of the location bar. The user can click on the Flash object to show activation options.

User have the choice to allow Flash just for the current session, or to remember that choice:

Site Authoring Tips

If a Flash element is very small, hidden, or covered by other content, users will likely not notice that Flash is required and will become confused. Even if the plugin element will eventually be hidden, pages should create the plugin element visible on the page, and should resize or hide it only after the user has activated the plugin. This can be done by calling a JavaScript function when the plugin is activated.

function pluginCreated() {
  // We don't need to see the plugin, so hide it by resizing
  var plugin = document.getElementById('myPlugin');
  plugin.height = 0;
  plugin.width = 0;
  plugin.callPluginMethod();
}

The HTML, by default, specifies the Flash object to be of a size which makes it visible, like this:

<!-- Give the plugin an initial size so it is visible -->
<object type="application/x-shockwave-flash" data="myapp.swf"
      id="myPlugin" width="300" height="300">
  <param name="callback" value="pluginCreated()">
</object>

The callback parameter defined in the HTML can be called in Flash using its flash.external.ExternalInterface API.

Using a script callback to determine when a plugin is activated

Similarly, a site's script shouldn't attempt to script a plugin immediately upon creation. Instead, the plugin object should call into a JavaScript function upon creation. That function can then issue the call into the plugin, knowing that everything is set up and ready to go.

First, set your up your HTML with a callback that calls the JavaScript function pluginCreated(), like this:

<object type="application/x-my-plugin" data="somedata.mytype" id="myPlugin">
  <param name="callback" value="pluginCreated()">
</object>

The pluginCreated() function is then responsible for the setiup of your script and any calls back into the plugin that you need to make:

function pluginCreated() {
  document.getElementById('myPlugin').callPluginMethod();
}