This took me a whole afternoon and involved a lot of hope as I browsed the Internet and no one seemed to have done this before.  Fortunately, MediaWiki extensions are easier to write than Joomla CMS ones :c)

This article shows you how to get your MediaWiki system to display your Camtasia Studio SWF files in it's articles.

Why Camtasia when there are other free options?

We tried lots of FLV players that were usually branded or not free.  These were awkward to configure a full screen button on the controls and do basic customization.  Our screen recorder was also not displaying the captions of the video unless it was an AVI file that we converted to FLV.  The quality was horrible.  Then we moved to Camtasia Studio where their videos were displaying in good quality but as SWF files.  This extension includes the default settings for "ExpressShow" in Camtasia Studio.

My Setup

• MediaWiki v1.14.0
• PHP v5.1.6
• MySQL v5.0.45
• Camtasia Studio v5.0

For Demonstration Purposes

• We want to add a video called "EXAMPLE.SWF" to an article

Let's begin

Create your video in Camtasia Studio and produce the SWF files

1. Finish doing your video
2. Go to File > Produce Video As... > Custom production settings > Next
3. Select 'Flash (SWF/FLV) - Adobe Flash Output' > Next
4. ExpressShow (complete optional settings) > Next
5. Video Info (complete optional settings) > Make sure "Embed Video into HTML" is checked > Next
6. Specify production name and click on 'FINISH'
7. This will produce a HTML, SWF, XML and JS file in the output directory.  We only want the SWF and JS file.

Add our extension to your Mediawiki extensions

1. Create a folder called "bukb_camtasia_player" in your /extensions folder
2. Copy the swfobject.js file produced by your Camtasia movie
3. Create a new PHP file in your /extensions/bukb_camtasia_player folder called "BUKB_player.php" with the following code:
   copyrawstyler

   * @version 1.00
    *
    * Changelog
    * =========
    *
    * 1.00 - Initial release
    *
    */
   
   // Extension credits that show up on Special:Version
   $wgExtensionCredits['parserhook'][] = array(
           'name' => 'BUKB Player',
           'author' => 'Joel Lipman (based on original flvplayer by Christopher Ottley)',
           'url' => 'http://www.joellipman.com/',
           'description' => 'Displays videos we have created using Camtasia Studio.'
   );
   $wgExtensionFunctions[] = "wfFlvPlayerExtension";
   
   
   /*
    * The FlvPlayer class generates code that embeds a flash movie player
    * with reference to the uploaded movie.
    */
   class FlvPlayer {
   
     /* Generate final code */
     function render() {
       $this->url = $this->getViewPath($this->file);
   
       $this->code = '
   		<div id="media"><div id="noUpdate"><p>The Camtasia Studio video content presented here requires JavaScript to be enabled and the  latest version of the Macromedia Flash Player. If you are you using a browser with JavaScript disabled please enable it now. Otherwise, please update your version of the free Flash Player by <a href="http://www.macromedia.com/go/getflashplayer">downloading here</a>.</p></div></div> 
   		 
   			// url . '", "csSWF", "640", "550", "9.0.28", "#000000");
   			so.addParam( "quality", "best" );
   			so.addParam( "allowFullScreen", "true" );
   			so.addParam( "scale", "showall" );
   			so.addParam( "allowScriptAccess", "always" );
   			so.addVariable( "autostart", "false" );
   			so.write("media");			
   			// ]]>
   		 
   		<!-- Users looking for simple object / embed tags can copy and paste the needed tags below.
   			<div id="media">
               
                   <param name="src" value="value" .="." $this-="$this-" />url . '"/>
                   <param name="bgcolor" value="#000000" />
                   <param name="quality" value="best" />
                   <param name="allowScriptAccess" value="always" />
                   <param name="allowFullScreen" value="true" />
                   <param name="scale" value="showall" />
                   <param name="flashVars" value="autostart=false" />
                   url . '" width="640" height="550" bgcolor="#1a1a1a" quality="best" allowScriptAccess="always" allowFullScreen="true" scale="showall" flashVars="autostart=false" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
               
           </div>
   		-->	
   	';
   
   	return $this->code;
     }
   
     function getViewPath($file) {
       $title = Title::makeTitleSafe("Image",$file);
       $img = new Image($title);
       $path = $img->getViewURL(false);
       return $path;
     }
   }
   
   function wfFlvPlayerExtension() {
     global $wgParser;
     $wgParser->setHook( "bukbplayer", "renderFlvPlayer" );
   }
   
   function renderFlvPlayer( $input, $argv ) {
     $result = $flvPlayerFile->render();
     return $result; // send the final code to the wiki
   }

   1.  * @version 1.00 
   2.   * 
   3.   * Changelog 
   4.   * ========= 
   5.   * 
   6.   * 1.00 - Initial release 
   7.   * 
   8.   */ 
   9.   
   10.  // Extension credits that show up on Special:Version 
   11.  $wgExtensionCredits['parserhook'][] = array( 
   12.          'name' => 'BUKB Player', 
   13.          'author' => 'Joel Lipman (based on original flvplayer by Christopher Ottley)', 
   14.          'url' => 'http://www.joellipman.com/', 
   15.          'description' => 'Displays videos we have created using Camtasia Studio.' 
   16.  ); 
   17.  $wgExtensionFunctions[] = "wfFlvPlayerExtension"; 
   18.   
   19.   
   20.  /* 
   21.   * The FlvPlayer class generates code that embeds a flash movie player 
   22.   * with reference to the uploaded movie. 
   23.   */ 
   24.  class FlvPlayer { 
   25.   
   26.    /* Generate final code */ 
   27.    function render() { 
   28.      $this->url = $this->getViewPath($this->file); 
   29.   
   30.      $this->code = ' 
   31.          <div id="media"><div id="noUpdate"><p>The Camtasia Studio video content presented here requires JavaScript to be enabled and the  latest version of the Macromedia Flash Player. If you are you using a browser with JavaScript disabled please enable it now. Otherwise, please update your version of the free Flash Player by <a href="http://www.macromedia.com/go/getflashplayer">downloading here</a>.</p></div></div> 
   32.   
   33.              // url . '", "csSWF", "640", "550", "9.0.28", "#000000"); 
   34.              so.addParam( "quality", "best" ); 
   35.              so.addParam( "allowFullScreen", "true" ); 
   36.              so.addParam( "scale", "showall" ); 
   37.              so.addParam( "allowScriptAccess", "always" ); 
   38.              so.addVariable( "autostart", "false" ); 
   39.              so.write("media"); 
   40.              // ]]> 
   41.   
   42.          <!-- Users looking for simple object / embed tags can copy and paste the needed tags below. 
   43.              <div id="media"> 
   44.   
   45.                  <param name="src" value="value" .="." $this-="$this-" />url . '"/> 
   46.                  <param name="bgcolor" value="#000000" /> 
   47.                  <param name="quality" value="best" /> 
   48.                  <param name="allowScriptAccess" value="always" /> 
   49.                  <param name="allowFullScreen" value="true" /> 
   50.                  <param name="scale" value="showall" /> 
   51.                  <param name="flashVars" value="autostart=false" /> 
   52.                  url . '" width="640" height="550" bgcolor="#1a1a1a" quality="best" allowScriptAccess="always" allowFullScreen="true" scale="showall" flashVars="autostart=false" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"> 
   53.   
   54.          </div> 
   55.          --> 
   56.      '; 
   57.   
   58.      return $this->code; 
   59.    } 
   60.   
   61.    function getViewPath($file) { 
   62.      $title = Title::makeTitleSafe("Image",$file); 
   63.      $img = new Image($title); 
   64.      $path = $img->getViewURL(false); 
   65.      return $path; 
   66.    } 
   67.  } 
   68.   
   69.  function wfFlvPlayerExtension() { 
   70.    global $wgParser; 
   71.    $wgParser->setHook( "bukbplayer", "renderFlvPlayer" ); 
   72.  } 
   73.   
   74.  function renderFlvPlayer( $input, $argv ) { 
   75.    $result = $flvPlayerFile->render(); 
   76.    return $result; // send the final code to the wiki 
   77.  } 

Amend your skin files

Amend your skins to include the reference to this script in between the head tags of every page, so

<head>
	<!-- START BUKB CAMTASIA PLAYER //-->
	<script type="text/javascript" src="/extensions/bukb_camtasia_player/swfobject.js"></script>
</head>

Amend your LocalSettings.php file

require_once("$IP/extensions/bukb_camtasia_player/BUKB_player.php");

View your file in MediaWiki

1. Upload the SWF file to your mediawiki system. (if you have problems with this see my article on overriding the MediaWiki system to allow SWF file uploads)
2. Refer to it in an article using the syntax: Image:Example.swf(Replace the swf file name with the name of your SWF file).

 Download these files

You can download these files by going to our downloads section and downloading the BUKB_Camtasia_Player.zip file.