MyPresenter

The cheaper, quicker way to add web-video and it's directed by you.

Tutorial

Working with your My Presenter files

Tutorial Updated: November 24th 2008

Your customized files, Free 'My Presenter' demo and tutorial are arranged in such a way to help you understand how easy it is to embed the final product onto your clients webpage.

If this is your first experience in working with My Presenter, then please take time to follow this short tutorial on adding the files to your clients' site. If after reading this you still have questions please email .

A My Presenter project consists of one or more Flash Videos (.flv) [known here as "Presenters"], controlled by a Flash Movie (.swf) [the "Movie"], and displayed from an Web Page (.html) [the "Page"].

Before You Begin

Before you begin adding My Presenter content to your site please test that you have Flash Player version 8 or later installed in all browsers you use. Our Flash Version Detection page will help you with this.

Your My Presenter Files

Below are the files required for adding My Presenter to your site. Right-click on each file and select 'Save Target As...' (Internet Explorer) or 'Save Link As...' (Firefox) to save the files.

Wherever possible we will provide example .html (or .php) Pages giving you an idea as to how to add the My Presenter content. Left-click on the .html files to view the example. If you choose to use the example pages please alter any URLs referenced to point to your own server - We do not offer free hosting for your live project files.

Should you wish to experiment you can use the free download below:

democlip.flv (1,664KB)

'My Presenter' Standard Movie files

Many (but not all) projects make use of our standard Movie files. 'v3.swf' is a full customisable web-based FLV player, discarding the flash FLVPlayback and ProgressBar components in favour of my custom written replacements (v1 and v2 are now obsolete). FLVs with embedded CuePoints will require a customised player.

Download the supporting material. Right-click on the links below and choose 'save as' or 'save link as' to download the required files to your computer.

v3.swf (9KB)
swfobject.js (10KB)

Hosting the Files

'My Presenter' requires that your site is hosted on a fast web server, and your visitors have a broadband connection. Presenter files are encoded at a data rate of approx. 300 Kbps (37 KB/s).

At this time please upload all supplied files to your live server (create a "video" folder if it helps). FLV, SWF are binary, the JS is ASCII mode.

Now use the iWEBTOOL speed test site to determine if your server is fast enough. Paste in the full path to the largest FLV file on your server and run the test. Divide the "Size" (KB) by the "Load Time" (secs) to get your server throughput rate in KB/s.

If your server is too slow consider hosting the My Presenter FLV and SWF files on a seperate server to your main site, as the components can be configured with full paths. A cheap load balanced Linux/UNIX hosting account such as PowWeb (USD$7.77/month) should suffice. Avoid Windows 2003 Server for a reason I'll explain later.

Server Configuration Testing

Please now download and install 'FLV Player' from martijndevisser.com. Open FLV Player, click on 'url...', and enter the full path to an FLV on your server. After a short time the FLV should begin playing.

If it didn't work, are you on Windows 2003 Server (IIS6)? By default IIS6 cannot serve .flv files as there is no MIME type configured. View Flash Technote 19439 for further information. You may need your hosting company to make changes, please point them to the Flash Technote page.

Adding My Presenter to your Page

A My Presenter file consists of one or more Flash Videos (.flv) [known here as "Presenters"], controlled by a Flash Movie (.swf) [the "Movie"], and displayed from an Web Page (.html) [the "Page"]. The Movie is added to your Page using a short piece of JavaScript known as SWFObject. A basic example of adding a My Presenter file to a Page might look like this...

<div id="flashcontainer">
  <h2>Video Available</h2>
  <p>Please ensure JavaScript is enabled in your browser, and then 
  <a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">
  upgrade your Flash Player.</a></p>
</div>

<script type="text/javascript" src="swfobject.js"></script>

<script type="text/javascript">
  var fo = new SWFObject("v3.swf", "flashid", "730", "186", "8", "#FFFFFF");
  fo.addParam("menu", "false");
  fo.addVariable("FLVContentPath", "democlip.flv");
  fo.write("flashcontainer");
</script>

Section One : Default/Alternative Content

<div id="flashcontainer">
  <h2>Video Available</h2>
  <p>Please ensure JavaScript is enabled in your browser, and then 
  <a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">
  upgrade your Flash Player.</a></p>
</div>

The <div> element is a container for the Movie, with default content <h2>Video Available<h2><p>Please ensure... which will be removed when the Movie appears. It requires a unique "id" attribute, set as "flashcontainer" in this example. Place this element where you'd like the Presenter to appear in your Page. You may style this element or edit its contents as you see fit - in some cases a still image may be more appropriate than an "upgrade" message.

Section Two : SWFObject Code

<script type="text/javascript" src="swfobject.js"></script>

This is the command to import the SWFObject JavaScript code. It only needs adding once per Page, and can be added anywhere in the Page including the <head>, but must be done above the code in Section Three. Don't forget to edit the path in "src" to point to your swfobject.js file.

Section Three : Parameters and Variables

<script type="text/javascript">
  var fo = new SWFObject("v3.swf", "flashid", "730", "186", "8", "#FFFFFF");
  fo.addParam("menu", "false");
  fo.addVariable("FLVContentPath", "democlip.flv");
  fo.write("flashcontainer");
</script>

These are the commands to create and display the Movie. It is also where any Movie and Presenter options are configured.

Create an instance of SWFObject

var fo = new SWFObject("v3.swf", "flashid", "730", "186", "8", "#FFFFFF");

Here the SWFObject is created. The parameters are as follows:

  1. Path to Movie file, e.g. "v3.swf". Edit this to point to your SWF file.
  2. A unique id attribute for the Movie element, e.g. "flashid". For some custom Video files, certain features of the Movie can be controlled using JavaScript, using this id as a handle.
  3. Display width of the Movie in pixels, e.g. "730".
  4. Display height of the Movie in pixels, e.g. "186".
  5. Version number of the Flash Player required to display content, e.g. "8". Video files require Flash Player version 8 or later.
  6. Background Colour of the Movie, e.g. "#FFFFFF". Video files without a background image will use this colour. Adding the parameter 'wmode transparent' (described below) will remove this background colour.

Add Optional Flash Parameters

fo.addParam("menu", "false");
fo.addParam("wmode", "transparent");

These optional parameters control the display of the Movie within the Page.

menu - Enables the right-click menu on the Movie element."true" or "false".
wmode - Window Mode. Described in detail at CommunityMX article. Transparent mode is quite a resource hog, and may cause stuttering video on lower performance computers. Options are "window" (default), "opaque" or "transparent". Do you really need transparent mode? If you need a specific background image for your My Presenter clip then contact us and we'll add it for you.

Add Flash Variables

fo.addVariable("FLVContentPath", "democlip.flv");
fo.addVariable("FLVBufferTime", "10");

Various parameters can be configured within the Page and passed to the Movie. Some common parameters include:

BARWaitDelay (in seconds) before displaying Loading message.
No parameter = 0. Timer begins when SWF loaded.
BGPContentPathPath to Background image. Relative to the SWF, not the current HTML page. Must be in same domain as SWF. Progressive JPEGs don't work.
No parameter = no background image.
BGPWaitWait for Presenter video ready before displaying Background image.
Any value = true. No parameter = false.
BGPSEnables image adjustments (BGPW,BGPH,BGPX,BGPY)
Any value = true. No parameter = false.
BGPW,
BGPH		Controls X/Y positioning of Presenter within the Movie.
No parameter = full flash area width/height.
BGPX,
BGPY		Controls X/Y positioning of Background image within the Movie.
No parameter = 0.
FLVContentPathPath to Presenter file. Relative to the SWF, not the current HTML page.
FLVBufferTimeAmount of Presenter video (in seconds) to buffer before playing.
No parameter = 0.1
FLVWaitShow first frame of Presenter video while buffering.
Any value = true. No parameter = false.
FLVAutoPlayControls Auto-Play of Presenter on page load.
Any value = true. No parameter = false.
FLVX,
FLVY		Controls X/Y positioning of Presenter within the Movie.
No parameter = 0.
KLKW,
KLKH		Controls width/height of play/pause button.
No parameter = full flash area width/height.
KLKX,
KLKY		Controls X/Y positioning of play/pause button.
No parameter = 0.

Running the Movie

fo.write("flashcontainer");

This is the final step for displaying the Movie, in which SWFObject writes the code into the "flashcontainer" element.