Screencasts on the front-end of the site

Step 1: Create the template

Here's a simple layout for a single video.

<div id="client_training">

	<div class="demo"><!-- this div is the repeater -->
		<h2>New board member</h2>
		<p>Tutorial for adding a new board member to the site.</p>
		<span class="video_src">/path/to/videofile.mp4</span>
		<div class="video"></div>
	</div><!-- demo -->

</div><!-- x videos wrap -->

Using this within an EE system? I recommend setting up a new channel with Super Admin only publishing capabilities. Create a few custom fields and you're good to go with an easy-to-update user guide.

<div id="client_training">

	{exp:channel:entries channel="demos"}
	<div class="demo"><!-- this div is the repeater -->
		<h2>{title}</h2>
		<p>{description}</p>
		<span class="video_src">{video_src}</span>
		<div class="video"></div>
	</div><!-- demo -->
	{/exp:channel:entries}

</div><!-- x videos wrap -->

Step 2: Include the required files

The video player I'm using is FlareVideo. A simple little HTML5 video player with a Flash fallback. If you want to use something else, feel free. Here's a list of HTML5 video players. One note on FlareVideo: I modified the core JavaScript file to prevent the spacebar from playing the videos.

And the required JavaScript & CSS includes:

<link rel="stylesheet" href="/css/flarevideo.css" type="text/css">
<link rel="stylesheet" href="/css/flarevideo.default.css" type="text/css">
<script src="/js/jquery.js" type="text/javascript"></script>
<script src="/js/jquery.ui.slider.js" type="text/javascript"></script>
<script src="/js/jquery.flash.js" type="text/javascript"></script>
<script src="/js/flarevideo.js" type="text/javascript"></script>

Step 3: Call the HTML5 video player

Next up is to write a simple jQuery function to load all the videos into their own FlareVideos. Oh, look, it's already done! How handy.

<script type="text/javascript">
jQuery(function($){
	$("#client_training .demo").each(function(){ // find each demo div
		// find the video div and get ready to call the flareVideo function
		var fv = $(this).children('.video').flareVideo(); 
		// get the url from .video_src
		var video_src = $(this).children('.video_src').text();
		fv.load([
		{
			src:  video_src, // variable we set 3 lines ago
			type: 'video/mp4' // we're only using mp4 for this
		}
		]);
	});
});
</script>

View/download these code snippets as a gist: http://gist.github.com/660467

Example of a front-end screencast tutorial

Screencasts within an ExpressionEngine control panel accessory

Accessories are nice little add-ons that are new to ExpressionEngine 2.x. They exist basically as tabs in the footer of the control panel. This method has the benefit of making the tutorials readily available to the client. No switching to the front-end of the site through browser tabs (best case scenario) or in the same window/tab (oh that hurts). It's all right there - next to the thing they're struggling with.

This is my first EE add-on. And, admittedly, its not perfect. But, it does the trick for now. And its free. So, enjoy!

Download Accessory | View on GitHub

The accessory look & feel

Here's how the accessory works.

Install the accessory

It's called Client Training. As with any add-on, you'll add the files in to the third_party folders of both /system/expressionengine/third_party/ and /themes/third_party/.

Customize the accessory

In /system/expressionengine/third_party/client_training/views/video_embed.php you'll add the info for each video in your training library.

Location of the file you'll customize

I've added spots for the title, a description, and the video file. Feel free to mess with the title (<h2>) or description (<p>), but leave the rest of the structure as is.

<div id="client_training">
	<!-- template for each demo video
	<div class="demo">
		<h2>Demo Title</h2>
		<p>Brief description</p>
		<span class="video_src">/path/to/videofile.mp4</span>
		<div class="video"></div>
	</div> <!-- x demo video -->

</div><!-- x client_training wrapper -->

If desired, you may customize the look and feel of the accessory through the /themes/third_party/client_training/client_training.css file.

Note: This accessory was created from the Train-ee Client Handoff accessory by Erik Reagan as the starting point.

Aaaaand now clients love you

Clients really like video training guides. They don't have to feel like they keep bothering you for answers to questions they've already asked. I really like it because I don't have to answer said questions, not to mention it takes much less time and is much more helpful than a PDF user guide.

Go ahead, give screencast user guides a shot for your next site.