1 – Produce a Video
The preferred format is an mp4 container with the AVC/H.264 video codec (mpg with the mpeg2 codec is second choice) and MP3 or AAC (needed for surround sound) audio codec.  This minimizes losses in the video conversions that will be done by either your video host or yourself.  The preferred resolution is 1920×1080 (1080p) or 1280×720, but not greater than the resolution of the raw footage used to produce the video.  Apple TV can display H.264 video, up to 5mbps, 1280×720, 24 fps, Progressive Main Profile. Apple TV supports AAC-LC audio up to 320 Kbps. The gating factors for video are bit rate and frame rate.

We’ll go into frame rates below, but minimize changes from the frame rate of your source video.  There is no point (in fact there are losses) in increasing the fps from 15 to 30 if the original footage was at 15 fps.  While the bitrate for audio can go as high as 48 kHz, YouTube prefers 44.1 kHz.

iTunes only accepts .m4a, .mp3, .mov, .mp4, .m4v, and .pdf so the fewer steps to mp4 the better.  The iPod/iPhone/iTouch support 640×480 while the Apple TV supports 1280×720.

2A – With An External Video Host
This means that you show your YouTube, Vimeo, blip.tv, or metacafe video embedded on your website.  It is easy and low risk.  Although typically there will be some host branding, the players tend to be quite attractive.  It also opens your show up to a broader audience that may be searching for videos specifically on those sites.

Upload the video from step one to the video host (YouTube, Vimeo, Blip.TV)

Now, we’re going to juggle two browser windows.  I find this easier (alt-tab) than switching between tabs.  In a new window create a new blog post.

In the old window, customize and copy the embed code from the video host.  Be sure the width of the video will fit comfortably in the space available in your blog.

Alt-tab back to the new window and paste the embed code into the blog post.

If you can access your mp4 or m4v source file on the host site copy the link to that file.  We’ll refer to this as the source video URL.  YouTube has a button to download your mp4 but does not provide a URL.  (It can be had using a tool like Video DownloadHelper but that is beyond the scope of this post.)  blip.tv does provide a link to the mp4 file.

If you can’t access your source file url on the host site upload the file to your blog’s media library.  At the WordPress dashboard go to Media – Add Media to upload the file.

Below your embed code create a hyperlink to download the source video file using its url.  Save the draft.  This generates an enclosure for the source code in the hyperlink.  The enclosure has the URL of the file that the RSS feed passes on to iTunes and other feed readers.  Your audience also has the option to download the file for later use or viewing on an alternative platform.

2B – Self Hosting
Self hosting means that you will control where your files are stored and how they are presented.  After you have produced your video, upload it to your server.  (Wait till after, because it is really hard to upload a video that doesn’t exist, right?)  Upload the file to your blog’s media library.  At the WordPress dashboard go to Media – Add Media to upload the file.

Next go to Media in the dashboard to open the media library.  Select your new video and click ‘edit’.  Copy the link to that file.

When editing one’s post, one can simply scroll down to the custom fields, select enclosure as the custom field name, and paste the URL as the custom field value.  Click the ‘Update’ button.  In this way there is no direct link in the post but iTunes will still provide the source video to subscribers.

3 – Publish

When you post your blog, your RSS2 feed will now include the media in the enclosure.  The blog title will be the podcast title in iTunes.  The video title will be the title of the specific episode.  iTunes captures a screen from the first frame of the video and uses that as a thumbnail.  The blog description will be the podcast description.  The blog post text will be the episode description.

iTunes appears to handle only the first enclosure if there is more than one enclosure per post (to provide both an iPod and HD version, for example).  My intention is to put the iPod version as the first enclosure so that iTunes subscribers can sync the show to their iPods.  blip.tv appears to maintain my 1280×720 resolution (a limitation of my source video) so subscribers who go to the web site can see it in HD.

I don’t know if I can add the podcast image and other metadata  after I register with iTunes or will need to use a plug-in in advance.  Their guidelines only state that one can manually set the language, category, and whether or not the content is explicit.  If not, the image can be added using the Podcast Channels plug-in in WordPress.  The podPress plug-in doesn’t seem to offer additional functionality to Podcast Channels.

To see how your feed looks in iTunes, go to the Advanced menu and select Add Podcast Feed and paste in your feed URL.  If all is well, your podcast should appear in your library.  If not you may want to visit Apple’s itunes specs.

4 – Tweak It
There is little uniformity in the way that your audience receives your video.  Some will watch on a Zune others on an iTouch.  Some will watch it in their browsers others will subscribe through iTunes.  Some will be on a Mac using Safari and others on a PC using Internet Explorer.  Some users have flash enabled and others don’t.  Plus the very language we use, HTML, to create our blog or website is changing.

Let’s assume that our mission is to reach the broadest audience we can as beautifully as we can.  That means that we will need at least four versions of every video.

• Our HD source video (see Step 1).  This is optimal for YouTube and other HD hosts.  It will also allow HD viewing for Macs, Apple TV, and viewers using the Chrome browser without flash.  Those on PCs without flash can download this for HD viewing.  I use the Apple TV upper limit described above.  Apple TV may only be a small part of the audience, but very few viewers of a vodcast will use a screen larger than 32″ so who will see the difference?  Besides that, it is as good as my camera video anyway.

• For the iPod-iPad-iPhone-iTouch audience, as well as SD for Macs, Apple TV, and viewers using the Chrome browser without flash:  The mp4 container with an AVC/H.264 video codec and mp3 or AAC audio codec with a bitrate up to 1500 kbps, a resolution of 640×480, and max frame rate of 30 frames per second.  This is the one that goes in our post’s first enclosure.

• For the flash-capable browser set, we’ll need the flv container.  One may even want an HD and an SD flash video option.  SD is better for bandwidth and HD is prettier when bandwidth is not an issue for your viewer.  Maybe I would go with HD if I could only choose one because most folks have high speed connections.  On the other hand people aren’t very patient about waiting for their video to load.  I think I’ll stick with 720×480.

• For the non-flash users who have Firefox and Opera browsers, we need the ogv container with the Theora video codec and Vorbis audio codec.  I wish all browsers supported Ogg because it is open source and open format with none of the H.264 licensing issues.  I also wish for world peace.

It probably goes without saying but generate each of those files directly from the HD source video, not from one of the other formats, to minimize quality losses.

This raises the issue of how to present these choices.  The four videos above fall into two categories, flash and HTML5 (non-flash).  When someone goes to view your vlog, you want them to see your video, not have to hunt for it.  This can be done by starting with the HTML5 video, which I believe is clearly the wave of the future, and degrading to a flash player.  Or it could be done by starting with the flash player, in wide use today, and degrading to the HTML5 video.  Since today is today, I have opted to default to flash and degrade to HTML5.  Also, HTML5 does not inherently include the ability to bring the video to full screen, something I like about flash.

If you are not hosting your own video, you will place your SD mp4 in the first enclosure as discussed above.  It must, therefore, be the first of any hyperlinks.  Remember iTunes only grabs the first enclosure so it should be the one folks can sync with their handhelds.  But also provide links to the other formats to offer maximum flexibility.  The biggest audience goes straight to the flash player.  Everyone else is only one click away from viewing the video.

Now, here is the special advantage of hosting your own video.  Normally, within your java script there is a link to get a flash player that only appears if the viewer does not have access to flash.  Simply replace that sentence and its hyperlink with links to the other videos.  Now, instead of an error message to the non-flashers, links magically appear allowing them to watch the video in one click.  Check out my post on this for the details.  That post also shows how to put a poster of the video behind the links so that your post page still has visual appeal.  It means that the default flashers just click on the play button and the others just click on their appropriate link.  Easy for everybody.

Well, this is the easy part. Being creative? That’s the challenge. Feel free to share links to your vlogs in the comments.

<script src=”__path to your media player__/swfobject.js” type=”text/javascript”></script>
<div id=”__this script id__” style=”margin: 3px; padding: 3px; text-align: center; float: left; width: 560px;”>
<font size=”3″ color=”#000100″ face=”verdana” style=”background-color:#FFFFFF”><b><strong>
PLAY <a href=”__path to your video image__.mp4″>Apple iTunes MP4</a> OR <a href=”__path to your video image__.ogv”>OPEN FORMAT VIDEO</strong></a>
</b></font></div>
<br clear=”all”>

<script type=”text/javascript”>// <![CDATA[
var sd = new SWFObject('__path to your media player__/mediaplayer.swf','mpl','560','402','8');
sd.addParam('allowscriptaccess','always');
sd.addParam('allowfullscreen','true');
sd.addVariable('height','402');
sd.addVariable('width','560');
sd.addVariable('image','__path to your video poster image__.jpg.jpg');
sd.addVariable('file','__path to your video image__.flv');
sd.write('__this script id__');
// ]]></script>

One can add a little extra wrinkle, and put those links over a fall back image.  This is done by making the image the background in a table.  In both cases, I highlight the links with a background color of white to assure legibility against potentially busy backgrounds.

<script src=”__path to your media player__/swfobject.js” type=”text/javascript”></script>
<div id=”__this script id__” style=”margin: 3px; padding: 3px; text-align: center; float: left; width: 560px;”>
<table cellpadding=”7″ cellspacing=”0″ border=”0″ background=”__path to your fallback image__.jpg” width=”560″ height=”402″>
<tr><td align=”center” valign=”bottom”>
<font size=”3″ color=”#000100″ face=”verdana” style=”background-color:#FFFFFF”><b><strong>
PLAY <a href=”__path to your video image__.mp4″>Apple iTunes MP4</a> OR <a href=”__path to your video image__.ogv”>OPEN FORMAT VIDEO</strong></a>
</b></font></td></tr></table></a></div>
<br clear=”all”>

<script type=”text/javascript”>// <![CDATA[
var sd = new SWFObject('__path to your media player__/mediaplayer.swf','mpl','560','402','8');
sd.addParam('allowscriptaccess','always');
sd.addParam('allowfullscreen','true');
sd.addVariable('height','402');
sd.addVariable('width','560');
sd.addVariable('image','__path to your video poster image__.jpg.jpg');
sd.addVariable('file','__path to your video image__.flv');
sd.write('__this script id__');
// ]]></script>

Now, pretty much anyone who isn’t using an old IE6 browser can have easy access to your videos either using the <video> tags or flash player first.  Of course, don’t forget that you could just stick the links under your embedded YouTube video, but then the non-flash crowd gets a missing plug-in message.  I haven’t really decided yet, but I think I’ll stick with flash first.   I’ll put my links over the fallback image so that everyone gets something pretty to see straight away, even if they’re going to have to add a click to see the video.