Making the Screencasts (Part 2: Encoding and embedding the screencasts)
- Posted December 19th, 2008
- Filed under: How We Do It, Technology
Earlier this month, I kicked off a three-part series about how I recorded the BatchBook screencasts with a post about the hardware and software I used to record the screencasts. I also included tips about scripting and recording the screencasts.
Today, I’m going to talk about how I exported the screencasts and embedded them within BatchBlue.com and BatchBook, our small business CRM.
When we last left our heroes, we had just recorded our screencasts (with Screenflick), done some simple splicing with QuickTime Pro, and saved a full-size, full-quality QuickTime video. This video looks and sounds great. The only problem is, it’s too big for the web. I’m not just talking about the file size. For example, the uncompressed version of the “Manage your contacts and social network” screencast came in at 27.1 megabytes. That’s not bad for a four-minute video.
The problem is the video’s dimensions. Before resizing, my videos were 1038 pixels wide and 758 pixels tall. While many users have large monitors now, there are still a ton of 1024×768 screens out there. That’s pretty much the size of our video. Factor in menu bars, task bars, browser windows, browser buttons, and other toolbars and we quickly realize we need to shrink our video.
While we’re shrinking our video, we might as well make a decision on what format to use. As a Mac guy, I love QuickTime. But the reality is the Flash Player is going to be on more computers by default than the QuickTime Player. And quite frankly, when you’re looking to sell your product, you want to get in front of as many eyes as possible. So, Flash it is!
Encoding the screencasts
Wait, why not put it on YouTube or Vimeo? I mean, they’ll host it for you with no bandwidth costs! That’s true. But the quality of those sites is absolute crud. Particularly for screencasts. I’ve just never had any success uploading something that looked good enough to put my name on it. By hosting the screencasts ourselves, we have full control over the quality.
As an aside, if your goal is to spread your video virally, you’d be nuts not to put it on the video sharing sites. But this video isn’t a viral marketing piece—it is a tutorial. So, image quality matters much more than sharability.
I’ve had good results encoding to Flash using Adobe’s very own Adobe Flash CS3 Video Encoder. The Encoder comes with Flash CS4 Professional ($699), but can be found packaged with other applications in the many Adobe bundles. I know there are other applications that export to Flash Video, but I haven’t tried any since I have Flash handy.
I export using the highest quality. I figure if you’re taking the time to watch a screencast, you probably don’t care about downloading a couple extra megabytes to get the best image quality possible. Here are the settings I use:
Basically, I used the default High Quality setting and then resized the video to 800 pixels wide. If you are compressing multiple videos, you can select all before entering these settings. That will apply the same settings to all videos.
So, now you’ve got a bunch of .flv files. But, how do you get them on your site?
Embedding the screencasts
I did quite a bit of Googling to find the best way to embed your own Flash videos. I was completely impressed by JW FLV Media Player. It’s open source, it’s cheap (€30 for a commercial license, free for personal use), it has great support, it has all kinds of add-ons, and it is accompanied by simple tools like this setup wizard.
JW FLV Player comes with two files you need to upload to your site—player.swf and swfobject.js. Then, in the page’s <head>, you need to link to the Javascript file like this:
<script type="text/javascript" src="swfobject.js"></script>
Then, where you want your video to be embedded, you drop something like this:
<div id="contacts-video" class="screencast">Screencast: Manage your contacts and social network</div>
<script type="text/javascript">
var so = new SWFObject('player.swf','mpl','800','604','9');
so.addParam('allowscriptaccess','always');
so.addParam('allowfullscreen','true');
so.addParam('flashvars','&file=screencasts/contacts.flv&image=screencasts/title-contacts.png');
so.write('contacts-video');
</script>
Just to explain what is going on here, we’re creating a <div> (with the id of contacts-video) that the screencast will live in. The text “Screencast: Manage your contacts and social network” is what will appear if the user does not have the Flash Player installed (the iPhone is handy for testing this scenario!). After that, we have a script that takes the player (player.swf) and customizes it based on a whole bunch of parameters. Then, the “so.write('contacts-video');” part replaces that text with the Flash video.
And huzzah! You’ve got this!:
Next steps
Congratulations! You now have your screencasts embedded on your web site! Next time, I’ll talk about how to make an iPod version of the screencast, build a feed for it, and get it listed in iTunes as a video podcast.
[...] [...]
[...] Encoding and embedding the screencasts [...]