Give Your Clients Personalised Screencasts in the WordPress Admin Panel

In this tutorial, I'll show you an easy way to provide your clients with some personalised video screencasts directly in the WordPress Admin Panel. We'll be doing this using a open-source media player and a little bit of PHP trickery to automate the process of making new videos available to the client.

Upon completing an awesome project and handing it over to a client, what's your current method for providing appropriate training? Sure, WordPress has one of the best administration panels available and the majority of the features are fairly easy to understand / learn – but what happens when you come across a client that encounters some difficulty? How do you show a less-than-savvy client how to use that amazing new plugin you've just written?

Your clients will thank you for this!

From experience, the most effective way to do this is to record mini-screencasts showing exactly how to do it. These do not have to be professional quality (though Jeffrey Way has produced a course to help with that) as no-one other than the client will ever see them. Also, if you'd rather not speak over the video – then don't! Just record your screen only.

This method of providing screencasts is designed to reduce the amount of phone calls and emails you receive asking 'why doesn't it look right?' or 'can you explain that to me again?'. Your clients will thank you for this too, as they can return to the videos whenever they need to brush up on their skills

We don't want:

To have to use an external 3rd-party video service
To have any of our videos showing up in the media library inside the WordPress Admin Panel

We do want:

An easy, fast way of providing our videos
The ability to upload a video and have it show up instantly in the WordPress Admin Panel

Tutorial Overview

Here's a quick run-through of what we'll be covering:

First we'll set up the directory structure and bring in our dependencies (we'll be using Flowplayer)
Then we'll create a simple page in the WordPress Admin Panel
Next we'll dive into our video directory and generate a list of the available videos
Finally we'll write a tiny bit of JavaScript that will load each video when the links are clicked

Super simple and super effective! Let's get coding!

Step 1 Create the Plugin Directory and Files

Create a new folder inside your plugins directory called videos
Create a file called videos.php
Inside the Videos folder, create 3 more folders – js, mp4, swf

Step 2 Download Flowplayer

"Flowplayer is an Open Source video player for your website. For site owners, developers, hobbyists, businesses and programmers" – Sounds perfect for our project! Download it here: Download (get the free version)

When you download the ZIP file, it will contain an example directory, a README file and a licence. We just want the JavaScript file and the two swf files. As seen below.

Step 3 Copy the Files Into the Plugin Directory

Take the 3 files shown above and put them into the corresponding directories that we created prior. Your file structure inside the videos directory should now look like this.

Step 4 The Plugin Comments

Ok, so now it's time to open up videos.php and begin authoring our plugin! As with all WordPress plugins, we need to add this information at the top of our plugin file.

/*
Plugin Name: Tutorial Videos
Plugin URI: http://wp.tutsplus.com
Description: This plugin displays the Tutorial Training Videos.
Author: Shane Osbourne
Version: 0.1
Author URI: http://wp.tutsplus.com/author/shaneosbourne/
*/

Step 5 Create the Output Function

Because we'll be dropping in and out of PHP in this tutorial, I'll do my best to explain each section – but fear not, it will become a lot clearer when you review the entire file at the end.

wp_videos_page()

function wp_videos_page() {
	/** Following snippets go here **/
}

Step 6 A Quick Helper Function

We don't want to repeat ourselves, so I like to create a little helper function like this to return the current working directory of the plugin we're working on (it will be helpful later when we need access to assets in the plugin directory).

video_plugin_path()

/** returns "http://example.org/wp-content/plugins/Videos" **/
function video_plugin_path() {
	return path_join(WP_PLUGIN_URL, basename(dirname( __FILE__ )));
}

Step 7 Set Up Some Variables

First we specify where we're going to keep our video files
Then we retrieve the 'real path' to our video directory. This is because later we'll be searching our mp4 directory for video files using glob() and it requires a real path on the filesystem, not a URL.
Then we create another variable that will store the entire URL into our mp4 directory

/* within wp_videos_page() */
$wp_video_dir       = '/mp4';
$wp_video_real_path = dirname(__FILE__) . $wp_video_dir;
$wp_video_url       = video_plugin_path() . $wp_video_dir;

Step 8 The Opening HTML

We're going to drop out of PHP now so that we can enter some plain HTML. First of all we open up a div tag with a class of wrap – this is a generic wrapper class that WordPress uses in the admin panel. Next we set a heading for the page and use one of WordPress' icons (the media uploader)

//exiting php
?>
	<div class="wrap">
		<div id="icon-upload" class="icon32"><br></div>
		<h2>Content Management Tutorial videos.</h2>

Step 9 Get the Video Files in the mp4 Directory

Here we will use glob() to list all of the available video files in the mp4 directory.
We pass our filesystem path along with a regular expression that will match any version of mp4 (MP4 and mp4, for example)
$videos will now be an array containing all of the video files.

<?php
// Array returned
$videos = glob($wp_video_real_path . "/*.[mM][pP]4");

Step 10 The Loop

Now that we have an array containing paths to our video files, we loop through each one and generate some HTML markup that will display a link to each clip.

First we check that $videos is not an empty array (if it is, we skip through to a simple message)
Then we enqueue the Flowplayer JavaScript file
Next we output a simple 'please choose a video to watch' message and open up a <ul>
Then it's the actual loop. We go through each file path and extract the filename only. Then we use str_replace and ucwords() to create a title for each video. This is so that files named in this format create-a-page.mp4 will become Create a Page.
```
			'create-a-page.mp4' //<--from this
			'Create a Page'     //<--to this
```
Next we generate some HTML markup for each video file with a data-video-url attribute and a class of video-link.
- data-video-url – this will be the URL path to each video file. We'll retrieve it later when we write the JavaScript.
- video-link – we'll use this CSS selector to listen for clicks on the links.
Finally, we close off the unordered list and set our default message for when there are currently no videos.

if (!empty($videos)) {

	wp_register_script('flowplayer_js', video_plugin_path() . '/js/flowplayer-3.2.6.min.js' );
	wp_enqueue_script('flowplayer_js');

	$o  = '<p>Please choose a Video to watch</p>';
	$o .= '<ul>';

	foreach ($videos as $video) {

		$video_file   = basename($video);
		$needles      = array('-', '.mp4');
		$replacements = array(' ', '');
		$video_title  = ucwords(str_replace($needles, $replacements, $video_file));

		$o .= sprintf(
			('<li><a href="" data-video-url="%s" class="video-link">%s</a></li>'),
			$wp_video_url . '/' . $video_file,
			$video_title
		);
	}
	$o .= '</ul>';
	echo $o;
}
else {
	echo 'Sorry there are no videos to view yet, I\'ll let you know when there is.';
}
?> //<-- Exiting php again

Step 11 The Video Container

Now it's time to create a div with an ID of player – this is what the video player will be loaded into. Also we close off the wrapper div that we opened earlier.

Note: By default, Flowplayer will load your videos into the specified div at the exact resolution you recorded them at. You could add some inline styles to the div to force the size of the video player to be whatever you want – but be careful if you do this, as your videos may not look great if you are trying to squeeze them into a different aspect ratio.

<div id="player"></div>
</div><!-- #Wrap -->

Step 12 The JavaScript

Now we just need to listen for clicks on our links, grab the video URL and load the player into the div we created above.

We'll listen for when our links are clicked and extract the data-video-url attribute from each one
Then we'll call a function that will load our video into the div
The function is play_video – it's responsible for calling the flowplayer() method. It takes 3 arguments:
1. The ID of the div that the player will be loaded into
2. The path to the swf file that Flowplayer uses to play the videos
3. The video URL
Finally we'll ensure the video is in view by automatically scrolling to it each time a new video is loaded

<script>
	// catch clicks on the video links
	jQuery('.video-link').on('click', function(e) {

		var link       = jQuery(this);
		var video_url  = link.data('video-url');
		play_video(video_url);

		e.preventDefault();
	});

	var play_video = function(video_url) {

		var plugin_url = '<?= video_plugin_path() ?>';
		var swf_url    = plugin_url + '/swf/flowplayer-3.2.7.swf';
		flowplayer("player", swf_url, video_url);

		// auto scroll to top of player
		jQuery('html, body').animate({
				scrollTop: jQuery('#player').offset().top-50
		}, 1000);
	}
</script>

Step 13 Register the Page

We're almost finished now, we just need to register our page so that it shows up in the WordPress Admin menu on the left hand side.

function wp_video_option_page() {

	add_menu_page('Tutorial Videos', 'Tutorial Videos', 'manage_options', 'wp_tutorial_videos', 'wp_videos_page');
}
add_action('admin_menu', 'wp_video_option_page');

Step 14 Activate the Plugin

Everything is ready now. All that's left is for you to upload your videos and activate the plugin.

Conclusion

That's it! If you've made it this far you now have a page where you can share personalised screencasts to your clients in the easiest way possible. All you have to do is upload your videos into the mp4 directory when needed and your clients will immediately have access to them!

HIGHLIGHTS OF THE DAY