Flowplayer plugin for Codex wiki

I’m busy setting up a Codex Wiki as a help system and needed the ability to embed screencast tutorials inline. There is a flash embed plugin but I wanted something more Youtube-like that didn’t download the video unless the user clicks on it in order to save bandwidth and keep the page loading quickly as we plan to have lots of videos.

Cue FlowPlayer and a short plugin I wrote. FlowPlayer is pretty impressive… it’s a SWF and a JS file you drop into your site and it leverages the jQuery built into Codex. If you want to use it in conjunction with Codex, you can use my plugin below. The wiki syntax looks like:

{{{ev url="http://url/to/your/movie.flv"
         height="300"
         width="400"
         alt="My alternate text description"
         splash="http://url/to/a/static/splash/screen.jpg"}}}

That code will give you a player that looks roughly like:

This was my first plugin for a Coldbox application and it was pretty easy to take an existing one and create another. It’s also the first Coldbox application I’ve worked with and so far I’m pretty impressed. I am looking at giving it a test drive for a mini app I have to build later this month for club elections and surveys.

Just drop this into your codex/plugins/wiki directory as ev.cfc. The way I’ve written the code, you can have multiple players per page as they’ll all be tagged with a class “flowplayer”:

< !-----------------------------------------------------------------------
********************************************************************************
Copyright 2009 by Brian Ghidinelli (https://www.ghidinelli.com)
********************************************************************************
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
********************************************************************************
$Build Date: @@build_date@@
$Build ID:	@@build_id@@
********************************************************************************
----------------------------------------------------------------------->
<cfcomponent name="EmbedVideo"
			 hint="A wiki plugin to embed video using FlowPlayer"
			 extends="codex.model.plugins.BaseWikiPlugin"
			 output="false"
			 cache="false">

< !------------------------------------------- CONSTRUCTOR ------------------------------------------->	

    <cffunction name="init" access="public" returntype="ev" output="false">
		<cfargument name="controller" type="any" required="true">
		<cfscript>
  		super.Init(arguments.controller);
  		setpluginName("EmbedVideo");
  		setpluginVersion("1.0");
  		setpluginDescription("A video embedding plugin that uses FlowPlayer");
  		setPluginAuthor("Brian Ghidinelli");
  		setPluginAuthorURL("https://www.ghidinelli.com");
  		setPluginURL("https://www.ghidinelli.com");

  		//Return instance
  		return this;
		</cfscript>
	</cffunction>

< !------------------------------------------- PUBLIC ------------------------------------------->	

    < !--- today --->
	<cffunction name="renderit" output="false" access="public" returntype="string" hint="This plugin will embed a video on the page using FlowPlayer">
		<cfargument name="url"  required="true" type="string" hint="The url to the video to display" />
		<cfargument name="height" type="numeric" required="false" default="300" />
		<cfargument name="width" type="numeric" required="false" default="400" />
		<cfargument name="splash" type="string" required="false" default="" />
		<cfargument name="alt" type="string" required="false" default="" />

		<cfset var event = getController().getRequestService().getContext() />
		<cfset var content = "" />

		< !--- use a jquery onready block --->
		<cfoutput>
		<cfsavecontent variable="content">
			<cfif len(arguments.splash)><img src="#arguments.splash#" height="#arguments.height#" width="#arguments.width#" alt="<cfif len(arguments.alt)>#HTMLEditFormat(alt)#<cfelse>Click to start playing</cfif>" /></cfif>
			<script language="javascript" type="text/javascript">
				$(document).ready(function()
				{
					flowplayer("a.flowplayer", "/js/flowplayer/flowplayer-3.1.2.swf");
				});
			</script>
		</cfsavecontent>
		</cfoutput>

		<cfreturn content />
	</cffunction>

</cfcomponent>