+ +

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

+ +

Show SWF inline, wait indefinitely for load

+ +

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

+ +

Typically SM2 appends a DIV and hides the SWF off-screen. To handle potential flash block cases, a flash container DIV with an ID of "sm2-container" is placed in the HTML. SM2 will find and append the flash movie to this element. In this case, the SWF can be targeted with CSS and is not positioned off-screen as it normally would be.

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 adjust flashblock.blockLocal under about:config in the address bar to test while offline.

+ +

CSS applied to #sm2-container, depending on state:

#sm2-container.movieContainer {/* Initial state: position:absolute/off-screen, or inline/relative */}
+#sm2-container.swf_timedout {/* Didn't load before time-out, show to user: On-screen, red border, etc..? */}
+#sm2-container.swf_unblocked {/* Applied if a timeout followed by an unblock (flash started.) Move off-screen. */}
+#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 */}
+#sm2-container.swf_error {/* Additional modifier, "something really broke" (fatal: security, missing SWF etc.) */}

+ +

SoundManager 2 load status: Loading...

+ +

Take a look at flashblock.css for implementation details.

+ +