SoundManager 2: Flash Block handling examples
Description: Demo of SoundManager 2 handling flashblock / "click to flash" blockers gracefully
Keywords: javascript sound, javascript audio, DHTML sound, flashblock, flash blocker, handling flashblock, click to flash, click2flash

# SoundManager 2: Flashblock / "click to flash" handling demos

### Show SWF inline, wait indefinitely for load (click-to-run or whitelist)

You can run this demo with Flash 8 (default), Flash 9 (normal mode) or Flash 9 + highPerformance mode (higher JS callback frequency).

#### Where (and when) to show the SWF

To handle potential flash block cases, put `<div id="sm2-container"></div>` in your markup where you'd like the SWF to appear in those cases. If not specified, SM2 will create and append the `#sm2-container` node to the document when it starts.

When `soundManager.useFlashBlock` is true, SM2 will not apply styles (eg. `style.position.left`) directly to the flash; rather, it will assign CSS classes and you can handle it as you choose. Take a look at the related CSS file you will also need if you turn this feature on.

#### Handling failed start-up cases

In the blocked/failed start-up case, `#sm2-container` will have a class name of `swf_timedout` applied to it.

SM2 will start its init process, and will fire `onready()`, `onload()` and `onerror()` handlers accordingly. Keep in mind that while `onerror()` may fire at first, it may be preceded by a successful `onload()` if the user first loads the page and then later unblocks the flash movie.

Note that flash blockers may not run when viewing offline (via `file://`) content, so try viewing this demo online. For FlashBlock (under Firefox), you can also go to `about:config` using your address bar and change the value of `flashblock.blockLocal` to test while offline.

### Flash Block Example

Here, Flash is appended by SM2 to the `#sm2-container` DIV and after a failed start attempt (if you have a blocker active), will have a `swf_timedout` class appended.

The SWF uses `position:absolute` and negative left/top values so as not to affect the normal page layout, but shifts to `left:auto;top:auto` (effectively left/top:0) in the blocked case, and becomes visible to the user. On a successful unblock, the movie goes back to left/top:-9999em and is hidden from view.

SoundManager 2 load status: Loading...

### Flash Block-related CSS

When `soundManager.useFlashBlock` is enabled, CSS is applied to `#sm2-container` depending on the progress of SM2's start-up.

This page + demos use the rules below, fully-defined and commented in flashblock.css. Use it as a base for your own SM2 + flash block implementations.

    #sm2-container {
     /* Initial state: position:absolute/off-screen, or left/top:0 */
    }
    #sm2-container.swf_timedout {
      /* Didn't load before time-out, show to user.
      Maybe highlight on-screen, red border, etc..? */
    }
    #sm2-container.swf_unblocked {
      /* Applied if movie loads successfully after
      an unblock (flash started, so move off-screen etc.) */
    }
    #sm2-container.swf_loaded {
      /* Applied if movie loads, regardless of whether
      it was initially blocked */
    }
    #sm2-container.swf_error {
      /* "Fatal" error case: SWF loaded,
      but SM2 was unable to start for some reason.
      (Flash security or other error case.) */
    }
    #sm2-container.high_performance {
      /* Additional modifier for "high performance" mode
      should apply position:fixed and left/bottom 0 to stay on-screen
      at all times (better flash performance) */
    }
    #sm2-container.flash_debug {
      /* Additional modifier for flash debug output mode
      should use width/height 100% so you can read debug messages */
    }

### Basic Demo

For a more minimal example, see the basic flashblock demo.