Mediawiki Extension for Camtasia Studio SWF videos

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:
    copyraw
    * @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

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

 

Amend your LocalSettings.php file

Add the following the the LocalSettings.php file in your mediawiki root folder:
copyraw
require_once("$IP/extensions/bukb_camtasia_player/BUKB_player.php");
  1.  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.

Category: MediaWiki :: Article: 216

Credit where Credit is Due:


Feel free to copy, redistribute and share this information. All that we ask is that you attribute credit and possibly even a link back to this website as it really helps in our search engine rankings.

Disclaimer: Please note that the information provided on this website is intended for informational purposes only and does not represent a warranty. The opinions expressed are those of the author only. We recommend testing any solutions in a development environment before implementing them in production. The articles are based on our good faith efforts and were current at the time of writing, reflecting our practical experience in a commercial setting.

Thank you for visiting and, as always, we hope this website was of some use to you!

Kind Regards,

Joel Lipman
www.joellipman.com

Related Articles

Joes Revolver Map

Accreditation

Badge - Certified Zoho Creator Associate
Badge - Certified Zoho Creator Associate

Donate & Support

If you like my content, and would like to support this sharing site, feel free to donate using a method below:

Paypal:
Donate to Joel Lipman via PayPal

Bitcoin:
Donate to Joel Lipman with Bitcoin bc1qf6elrdxc968h0k673l2djc9wrpazhqtxw8qqp4

Ethereum:
Donate to Joel Lipman with Ethereum 0xb038962F3809b425D661EF5D22294Cf45E02FebF
© 2024 Joel Lipman .com. All Rights Reserved.