Source Code Explained
Wasp publisher can output two kinds basic kinds of HTML code that you can use to display the player (render) throughout your site:
1. With Javascript
2. Standard HTML
Depending on whether or not you're using an external configuration file, the resulting code will vary slightly.
Rendering with Javascript
Players rendered with JavaScript rely on a <DIV> tag to act as a place holder for where the actual player will reside on your page. When the Javascript code is executed, the contents of the <DIV> tag are replaced with the player code.
The <DIV> tag has an ID attribute set, which uses the key-word "waspTarget" followed by a unique identification number (ID number). In the example below, the black black ID number is used in various ways. Once in the <DIV> next to the key-word "waspTarget", in the configs object definition, in the "instanceID" variable name, and it is also used throughout the wasp.js file to interact with the player.
Embedded configuration options :
<!-- THIS LINE GOES IN THE <HEAD> OF YOUR HTML PAGE -->
<script language="javascript" src="http://www.yoursite.com/media/wasp.js"></script>
<!-- START WIMPY PLAYER CODE -->
<div id="waspTarget0803220220"><a href="http://www.adobe.com/products/flashplayer/">Flash Player upgrade required</a></div>
<script language="javascript">
// <![CDATA[
var waspConfigs0803220220 = new Object();
waspConfigs0803220220.instanceID="0803220220";
waspConfigs0803220220.waspSwf="http://www.yoursite.com/media/wasp.swf";
waspConfigs0803220220.pageColor="000000";
waspConfigs0803220220.fp="http://www.yoursite.com/media/example.html";
waspConfigs0803220220.f="http://www.yoursite.com/media/example.flv";
waspConfigs0803220220.me="0";
waspConfigs0803220220.ph="158";
waspConfigs0803220220.pw="210";
waspConfigs0803220220.waspSkin="sh_1|||B8B...etc...";
makeWimpyPlayer(waspConfigs0803220220);
// ]]>
</script>
<!-- END WIMPY PLAYER CODE --> |
|
With external configuration file:
<html>
<head>
<title>Wimpy Wasp Player</title>
<script language="javascript" src="http://www.yoursite.com/media/wasp.js"></script>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="000000">
<tr>
<td align="center" valign="middle">
<!-- START WIMPY PLAYER CODE -->
<div id="wimpyTarget0803123153"><a href="http://www.adobe.com/products/flashplayer/">Flash Player upgrade required</a></div>
<script language="javascript">
wasp("0803123153", "000000", "210", "158", "http://path/to/media.flv", "", "waspConfigs.xml" );
</script>
<!-- END WIMPY PLAYER CODE -->
</td>
</tr>
</table>
</body>
</html>
|
Wimpy Javascript file
Required to actually present the player. If not included in the page, the "chunk" will render as "Flash player upgrade required". This reference to "wasp.js" should be situated in the <head> tag, but can be situated just before the "chunk" of code used to display the player.
Target Placeholder
The <div> tag is the placeholder for where Wasp will be rendered on the page. The <div> can be located anywhere on the page, however, it should be located on a line above the <script> that initializes the player. If the <div> is below the <script>wasp(), then the <div> may not be available at the time that wasp tries to initialize. You may want to position the <script> that initializes the player at the bottom of your page, shortly before the closing </body> tag -- this will ensure that the <div> placeholder exists.
Initialization script
This is the script that initializes the player and renders it on the page. Wasp uses SWFobject to render the player. The <div> contains an important "id" tag. The id tag must begin with "wimpyTarget" -- followed by the unique ID assigned in the initialization script.
Rendering Function Call
This line of code executes the rendering of the player on the page. You'll notice that when using an external configuration file, the function name and arguments are different.
Instance ID
Embedded configuration options :
This ensures that the player will be a unique object on the page. You will notice that the instance ID is "attached" to key words. Each key word is used for specific purposes.
waspConfigstXXXXXXX
Refers to the configuration object. The "configs object" may be renamed, but should be uniquely named for each instance of Wasp.
waspTargetXXXXXXX
Refers to the <div> placeholder. "waspTarget" is a key word and can not be altered.
|
|
With external configuration file:
The first parameter of the wasp() initialization function refers to an "Instance ID." This can be any alpha-numeric word or number. We do not recommend using any funky characters that are not standard roman letters or numbers. If you have more than one instance of Wasp on a page, this ID must be unique.
The remaining parameters are:
wasp(instanceID, theBkgdColor, theWidth, theHeight, theMediaFile, thePosterGraphic, theConfigurationFile)
NOTE: When using an external configuration file, you do not have to use a full URL, you only have to use the file name because Wasp will automatically look for this file in the same folder as wasp.swf. |
Rending with standard HTML
Embedded configuration options :
<!-- THIS LINE GOES IN THE <HEAD> OF YOUR HTML PAGE -->
<script language="javascript" src="http://www.yoursite.com/media/wasp.js"></script>
<!-- START WIMPY PLAYER CODE -->
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub
/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="210" height="158" id="wasp0803222317" align="center">
<param name="allowScriptAccess" value="always" />
<param name="movie" value="http://www.yoursite.com/media/wasp.swf" />
<param name="loop" value="false" />
<param name="menu" value="false" />
<param name="quality" value="high" />
<param name="scale" value="noscale" />
<param name="salign" value="lt" />
<param name="bgcolor" value="000000" />
<param name="flashvars" value="fp=http://www.yoursite.com/media/example.html
&f=http://www.yoursite.com/media/example.flv
&me=0&waspSkin=sh_1|||B8B...etc..." />
<embed src="http://www.yoursite.com/media/wasp.swf" flashvars="fp=http://www.yoursite.com/media/example.html
&f=http://www.yoursite.com/media/example.flv
&me=0&waspSkin=sh_1|||B8B...etc..." loop="false" menu="false" quality="high" width="210" height="158" scale="noscale" salign="lt" name="wasp0803222317" align="center" bgcolor="000000" allowScriptAccess="always" allowFullScreen="true" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
<!-- END WIMPY PLAYER CODE -->
|
|
With external configuration file:
<!-- THIS LINE GOES IN THE <HEAD> OF YOUR HTML PAGE -->
<script language="javascript" src="http://www.yoursite.com/media/wasp.js"></script>
<!-- START WIMPY PLAYER CODE -->
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub
/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="480" height="295" id="wasp0803183550" align="center">
<param name="allowScriptAccess" value="always" />
<param name="movie" value="http://www.yoursite.com/media/wasp.swf" />
<param name="loop" value="false" />
<param name="menu" value="false" />
<param name="quality" value="high" />
<param name="scale" value="noscale" />
<param name="salign" value="lt" />
<param name="bgcolor" value="000000" />
<param name="flashvars" value="f=http://www.yoursite.com/media/example.flv
&c=waspConfigs.xml" />
<embed src="http://www.yoursite.com/media/wasp.swf" flashvars="f=http://www.yoursite.com/media/example.flv
&c=waspConfigs.xml" loop="false" menu="false" quality="high" width="480" height="295" scale="noscale" salign="lt" name="wasp0803183550" align="center" bgcolor="000000" allowScriptAccess="always" allowFullScreen="true" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
<!-- END WIMPY PLAYER CODE -->
NOTE: When using an external configuration file, you do not have to use a full URL, you only have to use the file name because Wasp will automatically look for this file in the same folder as wasp.swf.
|
Standard HTML used to display the player.
It is important to recognize that there are two references to each "thing" -- once in the <object / param> and again in the <embed>. The <object> tag is used by one kind of browser, while the <embed> tag is used by another. If the URLs and options are not identical in each tag, the player will fail to work on at least one of kind of browser (e.g. Internet Explorer or Firefox).
Wasp Javascript File
Required to use the interactive features such as popup window, share, and any of the Javascript controls.
Configuration Options
The explanation of each option is available in the Wasp API.
Wasp SWF file URL
The reference to wasp.swf sitting on your server.
Instance ID
Identifies the overall object on the page, which keeps the instance unique and is useful If you're using the Javascript controls. You will use this reference control the player via JavaScript. NOTE: When rendering as standard HTML the Instance ID is attached to the word "wasp" -- if you're attempting to use the Javascript controls, do NOT include the word "wasp" for each function call... just use the Instance ID as per output by Wasp Publisher.
|
