Tuesday, September 30, 2014
   
Text Size
Login

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:

    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


  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:

  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.

Comments   

alijani
# alijani Wed, 9th November 2011
I dont understant what you mean by "amend yout skin file" with .... ....

I followed the rest of the instructions I am able to upload the file but am not able to embed videos. instead when i use [[Image:filenam e]] or [[File:filename ] i get a link to the file page and from the file page i am able to click on the file name to see the video only. if i use [[Media:filenam e]] it gives me a link that takes me to video if i click it. How can i embed the video within the original wiki page?
Like | Dislike | 0 Reply | Reply with quote | Quote
# Webmaster Wed, 9th November 2011
Hi Alijani,

Thank you for bringing this to my attention. Everytime I modify and save this article, the embedded code gets formatted and omitted by the content management system I am using.

I have corrected this now so hopefully it makes more sense. Note that when referring to a video from a MediaWiki article, I think the syntax you need is:

Code:
<bukbplayer>Image:my_video.swf</bukbplayer>


Kind Regards,

Joe
Like | Dislike | 0 Reply | Reply with quote | Quote
PaulR
# PaulR Wed, 16th January 2013
Hi, I am trying to use this with MediaWiki 1.19.2. However, it is not working yet.

The link is broken above to "BUKB_Camtasia_ Player.zip" in the Download section. Could you please repost this?

Also, re "Amend your skin files", where is the best place to "amend" the skin. I'm not sure if it is in the base skin files or elsewhere in MediaWiki.

Thanks in advance.
Like | Dislike | 0 Reply | Reply with quote | Quote
# Webmaster Wed, 16th January 2013
Hi Paul,

I've had someone else say this too, can I ask what website browser you are using as I've tried with MSIE, Firefox and Chrome and can't recreate the error?

The amend your skin files will be for the skin that is in effect on your mediawiki site. Hope that answers your question.

Joe
Like | Dislike | 0 Reply | Reply with quote | Quote
paulr
# paulr Wed, 16th January 2013
Joe, thanks for the quick response.

Re the download, the issue is that the link in the "article" above is broken. It should point to http://www.joellipman.com/features/downloads/folder/3.html and then it works fine for downloading!

Re skins, I am using "Vector". However, I am not a mediawiki guru and am unsure where in the skin config to put the script tag as outlined in the article.

Is it in "Vector.php"? If so, where and how do I add the code?

If not "Vector.php", where else do I whack it?

Thanks again,
Paul
Like | Dislike | 0 Reply | Reply with quote | Quote
# Webmaster Sat, 19th January 2013
Hi Paul,

Thanks for bringing the link to my attention. I've corrected it now, my site had just been upgraded and some of the links have changed.

With regards to your skin then it will probably be vector.php where you put the head script. Then modify the LocalSettings.p hp file and include the "require_once" line above.

Hope that help!
Like | Dislike | 0 Reply | Reply with quote | Quote
paulr
# paulr Mon, 21st January 2013
Joe et al,

The changes for the Vector skin is in "Vector.php".

There is a function initPage() around line 28.

To get this working you must:
1) Add in a global definition
global $wgScriptPath;

2) Add in the one line (or 2 with the comment):
// Add in script reference for Camtasia Player
$out->addHeadItem( 'bukb_camtasia_ player', '[script type="text/java script" src="' . $wgScriptPath . '/extensions/bukb_camtasia_player/swfobject.js"][/script]');

Note replace the "[" around the script tags with the Less Than / Greater Than symbols (these comments wouldn't show the correct code).
Like | Dislike | 0 Reply | Reply with quote | Quote
paulr
# paulr Mon, 21st January 2013
As noted in another reply, I got the skin updated. I then enabled the require_once for the extension.

However, then whenever I tried to update a page with the bukbplayer tag in it, the server had an internal error.

Is it your extension code blowing up? It feels like something isn't being initialised or created properly.

I wondered if your code require the FlowPlayer. Does it?

I downloaded a version of FlowPlayer but that blew up also. :-(

So, is flowplayer needed? If so, what version do you have working?

If Flowplayer isn't required, any clues as to why the save with your tag blows up?
Like | Dislike | 0 Reply | Reply with quote | Quote
paulr
# paulr Mon, 21st January 2013
Joe, thanks for all your help.
However, in the end I got Camtasia 5 to export in M4V format and used the MediawikiPlayer extension. That is working ok for now. Cheers.
Like | Dislike | 0 Reply | Reply with quote | Quote
Add Comment

Name:

Email:

Website:

Message:


Latest Posts