How we make our videos

Making the Video

There's a whole workflow to making the videos on this site. Essentially I shoot for a higher resolution (quality looks better on screen) with at most 25% scaling from the original resolution. So video happens like this.

Using Screenflow, I capture the screen at 1280x800. My default monitor resolution is 1920x1200 (24 inch screen) so I set the resolution down to the 1280x800 for capture. I later scale this using QuickTime Player (Pro Version) which comes with QuickTime, and I scale the movies down to 960x600.

The following settings and methods I use may be a bit unorthodox. Screenflow will export a video, directly, in the H.264 format or others. However, knowing that screen videos don't need the full frame rate at which they are recorded, I add in an extra step. I export the screen capture from Screenflow using the Animation codec (lossless) using a custom frame rate of 5 fps (sometimes 10 fps) - which is very fast to export. This means you get enough screens each second to show what you're talking about, but not so many that it makes a very large video. Most of my 30 minute videos average around 20-30MB. For the audio settings I set these to Lossless, Mono and 32 kHz (you didn't record two channels, you only have one mouth and it's not high fidelity music, so even 22 kHz is fine for voice). This "raw" export will get saved in the H.264 format with AAC encoding when exporting from QT Pro later - which is the next step. It's in QT Pro that I add my intro and exit sequences. I have a crude little RealBasic app that I created to slap them at the front and end and then create a reference movie. Then, finally, within QT Pro, I export the final video.

As a result of this process, you loose some of the fluid look to the video, but the resulting video size is much smaller and easier to consume. QuickTime .mov files are also smaller than their Flash equivalents (unless you do some magic with the .flv format) - hence my current choice to use this format.

Serving the Video

Currently, I'm using my own server at SoftLayer to store and serve the videos. I created a second virtual host to gotdrupal.com of media.gotdrupal.com. This provides a few advantages to serving the video from the same virtual host. One, you have a separate Apache log file which allows you to isolate out video views/downloads from the rest of your site. And secondly, it allows to you quicky switch to offsite video storage. I'm using Amazon's S3 to store backup copies of my videos, but in times of high demand it's a simple DNS switch to point to S3 when you can't handle the load or you're exceeding bandwidth allotment.

I currently upload the backup to Amazon's S3 and the process is manual - since I only do about one video a week. This could be automated, but I've simply not put the time into it yet. I'm also not using their new CloudFront but you could if you have high demand and traffic.

There are drupal services and other non-specific services which allow you to upload your content easily to Amazon. However, knowing that these services simply use S3 (or equivalent) underneath, I decided to manually upload to S3 (and realize a cheaper rate in the long run). You're always paying a premium when you're not managing it yourself.

Linking the video into the site is the hard part. You either have to place the link directly within your content (and know what you are doing) or you have to adapt your theme. Ultimately, the path to the video file must be generated and stored somewhere and one of the current issues with Drupal is a lack of flexibility when wanting to move your files from one place to another.

I chose to adapt my theme. Using the default profile module, which comes with Drupal, and some fields on my content types. I dynamically generate the path to the resulting video. This is done via the node preprocess function within Template.php. Of course, there is some DNS setup you can do to make it seem like the videos are coming from your domain when you use S3. For now, my videos are served from the same server.

Ultimately, you need to use a Player for your video. If you are using Flash there are a number of these which are available. Since I am simply using QuickTime, the player is already installed if you have QuickTime installed. What needs to happen is wrapping the right HTML code around the link to the movie. There are number of ways to do this. You can hard code this or you can go the dynamic route by using Javascript in the form of jQuery, which Drupal comes with, but doesn't currently support the latest (this was written when Drupal 6 was the current version).

Therefore you need to use some modules such as jQuery Update and jQuery Media. These are the two modules I'm using to get the right HTML player code to load onto the movie link. It uses CSS classes and jQuery to put the player HTML on dynamicially. If you turn off Javascript on this site, you'll see the raw link to the video is available. Visitors can either right-click this to download (which some prefer) or click to play the video, which Javascript will insert the player. You don't really have to use the jQuery Media module if you're comfortable adapting your theme so that you simply load the jQuery Media Plugin.

Wrapup

I'm sure there are other details you're wanting (missing) and if you leave a comment on this page then I'll do my best to fill them in.

In my opinion, the method of using the two jQuery modules above is the least "intrusive" when it comes to your theme, what's stored in the database and how you deliver the video. One simple css class tag is all that is needed to load/play the video. Of course the downside is that it depends on Javascript. However, the video is still accessible if Javascript is turned off (which, in some cases [iPhone] this is what you want).