Read Me | Example 1 | Example 2 | Example 3 | Example 4

 

Wasp

Version 2.0
(Formerly known as: Wimpy AV Single Play)

By Mike Gieson
Available at http://www.wimpyplayer.com
©2002-2006 plaino

This product includes software developed by Macromedia, Inc.

Macromedia(r) Flash(r) JavaScript Integration Kit
Portions noted as part of the JavaScript Integration Kit
are Copyright (c) 2005 Macromedia, inc. All rights reserved.
http://www.macromedia.com/go/flashjavascript/

Macromedia(r) Flash(r) JavaScript Integration Kit Created by:

Christian Cantrell
http://weblogs.macromedia.com/cantrell/
mailto:cantrell@macromedia.com

Mike Chambers
http://weblogs.macromedia.com/mesh/
mailto:mesh@macromedia.com

Macromedia


 

Contents:

Overview

Implimenting Wasp
  - Through standard HTML
  - Through JavaScript.
      - JavaScript Setup
      -
JavaScript Setup (for newbies)

 

 


Overview

Wasp allows you to present and play video (FLV, SWF video) in your web site without causing a cumbersome third party video program to open such as Windows Media Player, Quicktime or Real Video Player. Wasp is based on Macromedia Flash, which is common to nearly 98% of Internet users.

In addition, you no longer need to ask end users "which application would you like to use to watch this video" -- which means that you no longer have to encode each video 3 or 4 times to ensure that all of your visitors will be able to watch your video.

Wasp utilizes "standard issue" technology: HTML, JavaScript and Flash, which means that visitors to your site don't have to "do anything special" to watch your video, and you don't need any special server-side scripting in order to present and stream FLV and SWF video throughout your site.

Wasp provides the greatest amount of flexibility with a clean polished finish -- sutable for any web site. Advanced webmasters can take advantage of the built-in JavaScript feature that enable you use HTML-based links to load video into the player. This means that you can create a "playlist" using standard HTML. Videos can be loaded into the player using a simple JavaScript link.

 

 


Implimenting Wasp

There are two ways to implement a video using Wasp.

1. Through standard HTML

This is the easiest way to use Wasp and only requires that you use the Customizer Tool at wimpyplayer.com to generate the necessary HTML code to include a video on your page. Using this method will prohibit some of the enhanced features such as controlling and loading the video via HTML, but it will at least allow you to present a single video relatively easily.

A. Upload all the Wasp files to your website.

B. Use the Customizer Tool
The Customizer Tool will generate an HTML page that contains the necessary HTML code to display Wasp and your video.

When using the customizer tool, you will need to enter the address to wasp.swf and the FLV or SWF video file on your site. So you should have that information ready before your go to the customizer tool.
Example:
http://www.yoursite.com/wasp/wasp.swf

http://www.yoursite.com/wasp/video.flv

C. Upload the resulting HTML file to your web site.

You can also "copy and paste" the Wasp HTML code from the resulting HTML page into another page on your site. Paste the Wasp HTML anywhere between the <body> and </body> tags of your HTML page.

D. View the HTML page that contains Wasp.
Navigate to the HTML file that contains the Wasp HTML code with your web browser.
Example: http://www.yoursite.com/myWasp.html

2. Through JavaScript

Implimenting Wasp through JavaScript allows you to take full advantage of the interactive features such as being able to dynamically load new videos and pop up video windows..

PLEASE NOTE: The JavaScript control feature is intended for advanced HTML authors who are not afraid to tinker with HTML and modify JavaScript variables. If you are not comfortable with HTML authoring and JavaScript, we do not recommend that you attempt to utilize the JavaScript Control feature. There is a "newbie" section included in this documentation (see below), which attempts to help explain some of the technological jargon; be sure you are comfortable with this before proceeding.

The intension of the JavaScript Controls are to make it easier to maintain your site, add new videos or edit existing videos on your site. Although it may take a little effort to get up and running, in the end, it is easier than using the Customizer Tool, or attempting to manually edit the HTML code every time you need to make a change. Plus, you get the added flexibility to load videos via HTML, which, in turn, allows you to create playlists that include a brief description and an image using standard HTML.

Again, the JavaScript Controls are intended to make life easier, not harder, so if you get frustrated easily (or are completely new to this), it may be a good idea to keep it simple and stick with the Customizer Tool.

Wasp + JavaScript Controls consists of 3 files:

wasp.swf
wasp.js
waspPopup.html

<- The player
<- The wiring
<- The pop up presenter

Basically, the way it works is that the wasp.js file contains a series of functions that create HTML code on the fly, and uses the JavaScript Kit developed by Macromedia to allow JavaScript to communicate with the internal Actionscript in the Wasp player.  The end result is that JavaScript can therefore load video directly into Wasp.

The remainder of this documentation explains how to implement the Wasp JavaScript Control features. Here are some examples of what the final HTML code in your page will resemble in order to present, load and control video through JavaScript:

For the sake of reference, a standard HTML link appears as follows::

<a href="http://www.google.com">
Go to Google
</a>

A Wasp pop up video link resembles the following:

<a href="javascript:;" onClick="waspPopup('example1.flv', 320, 215);">
Pop up
</a>

Wasp embedded video HTML code appears as follows:

<script>
waspEmbed('example1.flv', 240, 160);
</script>

To load a video into an existing embedded Wasp player, enter the following:

<a href="javascript:;" onClick="wasp_loadAndPlay('example1.flv');">
Click to play: Example 1
</a>



 

Setup - For experienced users only

Non-experienced users: scroll down to the "newbie" section below)

1. Edit the wasp.js file:

Change:waspSWFfilename to refer to wasp.swf on your web site.

Example:

waspSWFfilename = "http://www.yoursite.com/wasp/wasp.swf";

Change waspHTMLtemplateFilename to refer to waspPopUp.html on your web site.

Example:

waspHTMLtemplateFilename = "http://www.yoursite.com/wasp/waspPopUp.html";

 

2. Reference wasp.js in the <head> tags.

For each page that will either link to a video (as a pop up) or play a video, you will need to include a reference to the wasp.js file so that the function calls used on your pages will work.

Example:

<head>
<script language='javascript' src='http://www.yoursite.com/wasp/wasp.js'></script>
</head>

3. Include the wasp function calls anywhere in the <body> of your HTML pages:

Pop up link:

<a href="javascript:;" onClick="waspPopup('example1.flv', 320, 215);">
Pop up
</a>

NOTE: By default, all pop up windows will start playing the video automatically.

Embedded Player:

<script>
waspEmbed('example1.flv', 240, 160);
</script>

 

AJAX:

Establish a blank player:

waspEmbed('', 180, 120);

Use an <a href> link to load a video:

<a href="javascript:;" onClick="wasp_loadAndPlay('example1.flv');">
Click to play: Example 1
</a>

NOTE: When using AJAX, only one video window can be present on one page. Try using IFRAMEs to load more than one video per page.

NOTE: Flash is somewhat tricky with relative file references. We only recommend full URL and absolute paths, as relative paths such as "../../path/to/file.flv" can cause serious difficulties. Flash assumes the location of the HTML page it is embedded in, not the physical location of the SWF file.

NOTE: Wasp will not play files above the public_html root.

 


Setup - For Newbies

In this section, we will explain how to configure the Wasp files and your web pages so that you can use Wasp throughout your site.

Throughout this tutorial, you will be asked to "Clear your browser's cache." This makes sure that your browser loads the latest changes to the files that were edited. Click here to lean how to clear your browser's cache.

For development, we highly recommend Mozilla's Firefox browser. FireFox's "Clear Cache Now" button works well. Internet Explorer does not always clear files from the cache, which causes many hours of double thinking where the code is wrong. With FireFox, you KNOW that the cache is cleared when you "Clear the cache." To get the Firefox browser or for more information, visit www.firefox.com.

To clear the cache in FireFox: From the Main Menu > Tools > Options > Privacy Icon > Cache tab > "Clear Cache Now." You can also include the "clearing of the cache" by clicking the "settings" tab in the same screen and check "cache" from the list. When this is selected, select (From the Main menu) > Tools > Clear Private Data. OR, ctrl+ shift+del.

In addition, there is a nifty JavaScript error reporting tool that can help you determine exactly where the JavaScript error is occurring. The JavaScript error console can be access From the Main Menu > Tools > JavaScript Console.

Nailing down the "Clear cache" and using the JavaScript Console will save you lots of time and headaches.

PART 1

In the first part, we are going to edit the JavaScript file so that the JavaScript file refers to the proper locations to the Wasp files on your site. Locations of files, Internet addresses and URLs are all "the same thing" -- URL stands for "Uniform Resource Locator" and is just an easy way to say, "this is where I want you to go on the internet," or," the internet address of a web site or file."

1. Open the local copy of wasp.js in a simple text editor.

The simpler the text editor, the better. We recommend notepad, which is usually located here:
C:\WINDOWS\system32\notepad.exe
Make a shortcut to this program and place the shortcut on your desktop, as we will be referring to it more in the future.

2. Scroll down to the line that reads:

waspSWFfilename = "wasp.swf";

What you are looking at is called a "variable" -- which means that waspSWFfilename can vary depending on your needs. You need this variable to reference the URL to wasp.swf on your web site.

You should have already created a new "wasp" folder on your web site and uploaded all the Wasp files to the newly-created folder. If you have not, be sure to do so now. Refer to the "installation" instructions up at the top of this document.

It is a good idea to test the URL before you go to the next step. Usually, we copy and paste the URL into an empty browser window to make sure that we’re "hitting" the right file. (Sometimes my typing can be terrible.)

You will notice that there are "comments" in the wasp.js file. Comments are lines that begin with two slashes //. These slashes are not processed as code;, they are overlooked when the JavaScript engine ("Interpreter") reads the script, so it's a nice way to include "human readable" explanations for how the script works.

3. Change this variable so that it references the location of wasp.swf on your web site.

Example:

waspSWFfilename = "http://www.yoursite.com/wasp/wasp.swf";

NOTE: Be sure to keep the URL between the quotes, and that the semi-colon is at the end of the line. Otherwise, the code will "break."

4. Do the same thing for the variable named waspHTMLtemplateFilename.

A couple lines down, you'll see the following line:

waspHTMLtemplateFilename = "waspPopup.html";

Change it so that it refers to waspPopup.html on your web site.

Example:

waspHTMLtemplateFilename = "http://www.yoursite.com/wasp/waspPopup.html";

5. Savewasp.js and re-upload the file to your wasp installation folder.

6. Clear your browser's cache

7. Pull up _example1.html file on your web site with your browser.

Enter the following into your web browser's "address" field:

http://www.yoursite.com/wasp/_example1.html

(Of course you'll want to replace "yoursite.com" with your domain name)

8. Click on all the links to make sure that everything is working OK.

 

PART 2

In this second part we are going to edit the example.html files so you will understand the process that you will need to apply to your existing web page(s) in order to use the JavaScript Controls on your web site.

 

2.1. Open your local copy of _example1.html in a text editor.

Toward the top of the page you will find the following line:

<script language='javascript' src='wasp.js'></script>

Edit the reference to "wasp.js" so that it uses a full URL to the wasp.js file on your web site.

Example:

<script language='javascript' src='http://www.yoursite.com/wasp/wasp.js'></script>

NOTE: You can wrap the URL in 'single quotes' or "double quotes" -- we recommend single quotes, but double quotes are OK too. The reason to use one over the other is if you wanted to include a quote in the reference.

For example, if you wanted to use a URL such as:
http://www.yoursite.com/bob's files/bob.jpg
... the only way to ensure that the apostrophe would work would be to wrap the URL with double quotes. if we wrapped the URL with single quotes, then the code would "breaK" because the apostrophe would act as the last (or ending) quote:

Bad:
'http://www.yoursite.com/bob's files/bob.jpg'
Good:
"http://www.yoursite.com/bob's files/bob.jpg"

Likewise, if we wanted to use a double quote in the URL, we would have to wrap the URL with single quotes:

Bad:
"http://www.yoursite.com/bob said "hi"/ hello.jpg"
Good:
'http://www.yoursite.com/bob said "hi"/ hello.jpg'

I do not recommend ever using strange characters in any file name or folder name. Try and use only alpha-numeric characters.

The reason we provided this long explanation is because sooner or later you are going to want to use a file with an apostrophe in your wasp code -- like when you try and reference an FLV video such as:

Bad:
waspPopup('bob's video.flv', 320, 240)
Good:
waspPopup("bob's video.flv", 320, 240)

It will invariably happen, and now you know why.

2.2. Save _example1.html and upload it to a DIFFERENT folder on your web site.

Example:

http://www.yoursite.com/someWhereElse/_example1.html

2.3. Open your browser and enter the URL to the _example1.html file in the NEW folder.

The video should play. If it does not, go back to step 2.1 and try again.

If the video does work and you want to include the video on an existing page on your site. You will have to edit your existing page by adding the reference to the wasp.js script in the <head> of your HTML page, then add the call to the javascript function somewhere in the <body> tag.

To do this:

Open the _example1.html file in a text editor and copy the line that reads:

<script language='javascript' src='http://www.yoursite.com/wasp/wasp.js'></script>

Then open your existing page and paste the code anywhere between the opening <head> tag and the closing </head> tag.
Example:

<html>

<head>

<script language='javascript' src='http://www.yoursite.com/wasp/wasp.js'></script>
</head>

<body>
blah blah blah
</body>

</html>

You can only have one set of <head> tags (an opening <head> and closing </head> is one set. Do not put two sets in your page... just paste the <script>blah blah</script> tag BETWEEN the head tags.

2.4 Take a deep breath.

2.5 Understanding the available "methods" contained in the JavaScript Controls.

There are three "methods" of "functions" you can call in your HTML pages. One is a call to embed a video directly into the page, another is a text or image link to pop up a new window and the third is a call to load a new video into an existing embedded player. The later two utilize a standard HTML hyperlink tag.

Let’s first start with the easiest of the three...

2.6 The embedded player function

We can "embed" a video into a web page. As you know, the Customizer Tool can create HTML code to embed a video into your page. With the JavaScript Controls, we can do the same things as the Customizer Tool without having to continually use the Customizer Tool. The "waspEmbed" function allows us to render all the HTML required to display a video without all the overhead and complexity of the HTML.

To embed a video into your HTML page, include the following code anywhere between the opening <body> and closing </body> tags in your HTML page. This function will write all the code necessary to display the video to the size you specify.

Example:

<script>
waspEmbed('http://www.yoursite.com/wasp/example1.flv', 240, 160);
</script>

Where the URL to the example1.flv is the file name of the video we want to play. And the two numbers following the file name refer to the Width and Height of the video.

2.7 The "pop up window" function

The second way to present a video is to pop it up into a tightly-fitting window when a user clicks on a text-based link, or on an image link. Utilizing this functionality requires a little more understanding of how to "call a function" using a hyperlink rather than just plopping a function down in the HTML.

A "pop up" function call using a text link looks like:

<a href="javascript:;" onClick="waspPopup('example1.flv', 320, 215)">
Pop up

</a>

NOTE: By default, all pop up windows will start playing the video automatically.

A pop up function call using an image link looks like:

<a href="javascript:;" onClick="waspPopup('example1.flv', 320, 215)">
<img src="graphic.jpg">
</a>

Where example.flv is the file name of the video we want to play and the two numbers refer to the Width and Height of the window.

NOTE: The minimum size of any pop up window is 100 pixels by 100 pixels. Browsers will not allow you to pop up a window that is any smaller;it's a security feature.

The Popup function call is similar to a standard HTML hyperlink, but just a little bit more daunting.

With a standard HTML hyperlink, we usually just reference a URL in the "href" attribute of a hyperlink tag.

Example of a standard HTML hyperlink tag:

<a href="URL"> Click Here </a>

The <a> tag contains one attribute named href (which stands for "Hyperlink Reference"). The <a> tag in our standard HTML example above is wrapped around the words "Click Here" -- so that when the words "Click Here" are clicked, the browser knows to go to a new page... Or, the browser "hyperlinks" to a new page.

With JavaScript we can take advantage of the simplicity of the <a> hyperlink tag by adding an additional attribute to the <a> hyperlink tag. The additional reference is an "onClick" attribute.

Example:

<a href="javascript:;" onClick="do something" > Click Here </a>

In order to tell the browser that we are using javascript instead of a traditional hyperlink reference, we replace the usual URL with the word "javascript" followed by a colon and semicolon. Doing so indicates to the browser that we want to override the traditional hyperlink action with a javascript function.

The additional attribute named "onClick" tells the browser what kind of user interactivity we want the browser to react to. There are a variety of interactive options we can set this attribute to, but onClick is the most widely used option -- supported by all browsers, so we'll just stick with this option.

So, now that we have told the browser to address this hyperlink when the link is clicked on -- or "onClick"  -- we need to inform the browser which JavaScript function to use when the link is clicked.

In the same respect that the traditional href attribute "points" the browser to a new URL, with the onClick attribute, we are "pointing" the browser to a JavaScript function. The JavaScript function is actually contained in the wasp.js file, which we referenced in the <head> tag... here we are just "calling" the function with the specifics about the video we want to open.

 

2.8 Loading a video into an existing embedded player.

The final JavaScript Control allows you to build an HTML-based playlist that includes a short description, an image and whatever else you want. When the user clicks on the link, the video will "load and play" in the existing embedded player.

The first step is to follow the instructions for the "embedded player" described above to establish an embedded player on the page.

Example:

<script>
waspEmbed('', 240, 160);
</script>

Then add the following JavaScript link on your page to load a video into the existing embedded Wasp player:

<a href="javascript:;" onClick="wasp_loadAndPlay('http://www.yoursite.com/wasp/example2.flv');">
Click to play: Example 1
</a>

This example is similar to the pop up window example; the difference is that you must first establish an embedded player on your page before calling the waspLoadAndPlay function. Technically, the embedded player does not have to be "empty;" you can populate the embedded player with a video if you want.

 

 

© 2006 Plaino. www.wimpyplayer.com