You can run this demo with Flash 8 (default), Flash 9 (normal mode) or Flash 9 + highPerformance mode (higher JS callback frequency).
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.
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.
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...
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
(flash started, so move off-screen etc.) */
}
#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 */
}For a more minimal example, see the basic flashblock demo.