encoding TTG Stage CE videos

To The World

HTML5 Video

With the advent of HTML5, hosting video on your own web site has become much simpler. If you know how to make the best of HTML5 video then you can get away from YouTube and Vimeo's hold on hosting web video and host them on your own server. This avoids any possible complications with web sites laying claim to your creations because you uploaded your work to their site. And it allows you to contain your creations within pages that conform to your vision - your look and feel - critical components of good branding.

Much has been written on HTML5 video - what is needed in terms of browser support, encoding video so the built-in HTML5 video player will be used and ensuring you have fall back for both older browsers as well as supporting playback on Apple mobile devices (iPod, iPhone, iPad, ...) as well as most Blackberry and Android devices. Matt Pilgrim's exhaustive publication "DIVE INTO HTML5" (licensed under a Creative Commons license) has a whole section on HTML5 video and while it is intense it sheds a lot of light on this complex subject.

This is a complex field and there is more than one landmine waiting out there to make life difficult. Here's some things to watch out for ...

  • You must be running on an Apache/PHP server. This is one of the most common platforms available and usually at very reasonable cost.
  • Your web host must be able to supply the video stream at an acceptable rate otherwise your end users experience can be degraded to the point of not being useable. This will require some experimentation and possible upgrade to your web host.
  • The file formats/mime types used in HTML5 video are fairly new. You will need to add the following definitions to a .htaccess file in the root path of your site to allow them to be properly served to your users.
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
SetEnvIfNoCase Request_URI .(og[gav]|mp4|m4a|webm)$ no-gzip dont-vary
  • Not all browsers are up to speed with HTML5 features let alone HTML5 video. Chrome, Safari and Firefox are quite current while Internet Explorer won't have HTML5 video until IE9 and that will only be available to users who have Windows Vista or Windows 7 installed. In this situation you will need to provide a flash player as a fallback and JWPlayer from LongTail Video is an excellent solution.
  • You will need the glue that hangs this all together and that supports graceful fallback so all your users, regardless of browser, have quality experience. Kroc Camen of Camen Design (also a Creative Commons licensed resource) has an excellent post that lays out the details.

Encoding and file formats

QuickTime Export for Web

Apple's QuickTime "Export for Web..." command will take an H.264 MP4 encoded video file and recode it into several different files, each specifically designed for iPhone (both wifi and cellular driven) and desktop playback.

I strongly recommend that you encode all the other file types suggested (the original base MP4 and the subsequent derivative OGV and WebM variants) uniquely for each playback environment.

Start out by encoding the lowest quality MP4 that will still create a quality experience for your user but that won't tax your server or your users browser or CPU.

For example, my TTG Stage CE demo video was originally encoded as a Blu-Ray quality video (i.e. an H.264 MP4 encoded at a high variable bitrate (VBR) between 6-10Mbps for NTSC 720p (1280×720 - 16:9) at 30fps, 320kbps AAC Stereo audio). For a video 1'10" long the resulting .mp4 file was over 52MB, the .m4v was over 10MB while the .ogv and .webm files each averaged about 20MB each. Including the QuickTime generated iPhone files the total size approached 120MB.

With files of that size playback would often stutter at the beginning as my server tried to stream the larger high bitrate versions (the .mp4 and .m4v versions).

lightroom TTG StageEncoding the base H.264 video using a lower bitrate (VBR between 3-4.5Mbps) for NTSC 450p (i.e. 800×450 - still 16:9) 24fps and 192kpbs AAC Stereo audio brought the MP4 file size down by half to a more reasonable 26MB. Oddly enough the M4V, OGG and WebM files still come in around 10MB and 20MB respectively.

But the total disk space used went down by nearly 30% to just under 88MB. I also adjusted the stage size in TTG Stage CE to match.

This helped lower server bandwidth consumption and CPU usage and even though the actual video quality is not as high the quality used more closely matches the playback environments and this gives your end user a much better experience.

One final word of caution. I use the Firefox Firefogg plugin to created the OGG and WebM variants from my base MP4 file. FFMPEG and it's variants for Windows system are command line versions and while I have used programs like this many times, they seem a bit arcane is this day and age.

firefogg advanced video settingsFirefogg does a super job but there is one warning.

Once you point the plugin to your base MP4 file Firefogg makes very good guesses on the settings it should use - on all but one - and that is aspect ratio. For some reason Firefogg didn't determine the correct aspect ratio even though it has the dimensions correct. If your video isn't the standard definition aspect ratio of 4:3 make sure you go into the Advanced Video Encoding group and select 16:9 as the aspect ratio.

With these suggestions in hand you can create amazing artistic or educational/tutorial videos that enhance your web site and enrich your end user's experience. And that is one of the keys that will bring people back to your site again and again.

If you found this useful or if you have used TTG Stage CE or HTML5 video to publish videos from your own web host leave a comment below - we would love to see what you have created!


Leave a Comment

Your email address will not be published. Required fields are marked *


Get Email Updates

Support

It takes money to run a website. If we have been of assistance to you, if you have found useful information on our website, or if you have enjoyed using the free Photoshop Creative Commons plugin, please consider helping to defray our costs by making a secure PayPal donation. We do not receive any of your personal information or financial data.

Disclosure

john bishop images receives a small portion of affiliate sales. This costs you nothing extra, but helps to support our work. Though compensated by affiliate relationships, john bishop images carefully chooses affiliates based upon the quality of services and products these entities provide to our users. They must provide significant value-add. john bishop images is independently owned and the opinions expressed here are our own.