glenux/wyrian
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity
wyrian/js/libs/soundmanager/demo/flashblock/method1/index.html

77 lines
4.8 KiB
HTML
Raw Normal View History

Version 0.2b : - Intro Screen - Share buttons (Twitter/Facebook) - SoundManager - Add audio files - Some CleanUp
2011-02-13 12:28:40 +00:00
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>SoundManager 2: Flash blocker handling examples</title>
<meta name="robots" content="noindex" />
<meta name="description" content="Demo of SoundManager 2 handling flashblock / &quot;click to flash&quot; blockers gracefully" />
<meta name="keywords" content="javascript sound, javascript audio, DHTML sound, flashblock, flash blocker, handling flashblock, click to flash" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<!-- design template, you don't need this -->
<link rel="stylesheet" type="text/css" href="../../index.css" />
<link rel="stylesheet" type="text/css" href="../../debug.css" />
<!-- actual flashblock demo stuff, this is for you -->
<link rel="stylesheet" type="text/css" href="flashblock.css" />
<script type="text/javascript" src="../../../script/soundmanager2.js"></script>
<script type="text/javascript">
// custom demo options, not for your needs
soundManager.debugMode = true;
soundManager.url = '../../../swf/';
// flash version URL switch (for this demo page)
var winLoc = window.location.toString();
if (winLoc.match(/flash9/i)) {
soundManager.flashVersion = 9;
if (winLoc.match(/highperformance/i)) {
soundManager.useHighPerformance = true;
}
} else if (winLoc.match(/flash8/i)) {
soundManager.flashVersion = 8;
}
soundManager.onready(function(){
var loaded = soundManager.getMoviePercent();
document.getElementById('sm2-status').innerHTML = 'SoundManager load OK';
});
soundManager.ontimeout(function(){
var loaded = soundManager.getMoviePercent();
document.getElementById('sm2-status').innerHTML = 'No response (yet), flash movie '+(loaded?'loaded OK (likely security/error case)':'has not loaded (likely flash-blocked.)')+' Waiting indefinitely ...';
});
</script>
</head>
<body>
<div style="margin:1em;max-width:60em;font-size:110%">
Remove whitespace [Gun.io WhitespaceBot]
2011-12-19 20:46:06 +00:00
Version 0.2b : - Intro Screen - Share buttons (Twitter/Facebook) - SoundManager - Add audio files - Some CleanUp
2011-02-13 12:28:40 +00:00
<h1><a href="http://www.schillmania.com/projects/soundmanager2/">SoundManager 2</a>: Flashblock / "click to flash" handling demos</h1>
<h3>Show SWF inline, wait indefinitely for load</h3>
<p class="note">You can run this demo with <a href="#flash8" onclick="window.location.replace(this.href);window.location.reload()">Flash 8</a> (default), <a href="#flash9" onclick="window.location.replace(this.href);window.location.reload()">Flash 9</a> (normal mode) or <a href="#flash9-highperformance" onclick="window.location.replace(this.href);window.location.reload()">Flash 9 + highPerformance mode</a> (higher JS callback frequency).</p>
<p>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.</p>
<p>SM2 will start its init process, and will fire <code>onready()</code>, <code>onload()</code> and <code>onerror()</code> handlers accordingly. Keep in mind that while <code>onerror()</code> may fire at first, it may be preceded by a successful <code>onload()</code> if the user first loads the page and then later unblocks the flash movie.</p>
<p>Note that flash blockers may not run when viewing offline (via <code>file://</code>) content, so try viewing this demo online. For FlashBlock (under Firefox), you can also adjust <code>flashblock.blockLocal</code> under <code>about:config</code> in the address bar to test while offline.</p>
<p>CSS applied to <code>#sm2-container</code>, depending on state:</p>
<pre class="block"><code>#sm2-container.movieContainer {<span><span>/* Initial state: position:absolute/off-screen, or inline/relative */</span></span>}
#sm2-container.swf_timedout {<span><span>/* Didn't load before time-out, show to user: On-screen, red border, etc..? */</span></span>}
#sm2-container.swf_unblocked {<span><span>/* Applied if a timeout followed by an unblock (flash started.) Move off-screen. */</span></span>}
#sm2-container.high_performance {<span><span>/* Additional modifier for "high performance" mode, should apply position:fixed and left/bottom 0 to stay on-screen at all times (better flash performance) */</span></span>}
#sm2-container.flash_debug {<span><span>/* Additional modifier for flash debug output mode, should use width/height 100% so you can read debug messages */</span></span>}
#sm2-container.swf_error {<span><span>/* Additional modifier, "something really broke" (fatal: security, missing SWF etc.) */</span></span>}</code></pre>
Remove whitespace [Gun.io WhitespaceBot]
2011-12-19 20:46:06 +00:00
Version 0.2b : - Intro Screen - Share buttons (Twitter/Facebook) - SoundManager - Add audio files - Some CleanUp
2011-02-13 12:28:40 +00:00
<p>SoundManager 2 load status: <b id="sm2-status">Loading...</b></p>
Remove whitespace [Gun.io WhitespaceBot]
2011-12-19 20:46:06 +00:00
Version 0.2b : - Intro Screen - Share buttons (Twitter/Facebook) - SoundManager - Add audio files - Some CleanUp
2011-02-13 12:28:40 +00:00
<p>Take a look at <a href="flashblock.css">flashblock.css</a> for implementation details.</p>
<div id="sm2-container">
<!-- flash is appended here -->
</div>
Remove whitespace [Gun.io WhitespaceBot]
2011-12-19 20:46:06 +00:00
Version 0.2b : - Intro Screen - Share buttons (Twitter/Facebook) - SoundManager - Add audio files - Some CleanUp
2011-02-13 12:28:40 +00:00
</div>
Reference in a new issue Copy permalink