Distributing HTML5 videos with the Amazon CloudFront CDN – Part III

In part 1 of the blog post we set up an Amazon S3 and CloudFront account for hosting of our videos. Then we discussed how to embed these videos into a HTML page in part 2. Finally we are talking about why an alternative video format should be added and how to implement a Flash fallback for old browsers.

Not every browser is supporting videos encoded in MP4. Firefox and Google Chrome are popular browsers that are supporting HTML5 video, but the video must be encoded in the WebM (VP8).

To support both formats one can write:

<video width="640" height="360" controls poster="poster.jpg">
 <source src="myMovie.mp4" type="video/mp4">
 <source src="myMovie.webm" type="video/webm">
</video>

How to create a WebM encoded video?

If you have a MP4 file you can use different tools to create a WebM variant.

One such tools is Firefogg. Start Firefox and goto http://firefogg.org/make/ . Click on

“Install Firefogg” if the extension is not already installed.

Install Firefogg

Wenn you go to  http://firefogg.org/make/ again there is a simple wizard, that let you generate the WebM video.

Make Web Video

You have several options, e.g. you can choose 720p format or open the advanced options dialog.

After clicking on ‘encode’ the encoding process takes place. Depending on the size of the MP4 file and the applied settings this can take some minutes.

After the conversion the file is available in the WebM format.

Recommendations

– first export a MP4 with really high quality from your screencast tool (big file size)

– use this MP4 as input for Firefogg

– try some settings until there is a good balance between quality and file size

– re-export the MP4 file with a reasonable file size (lower quality) and use this on your site

– now you have two good quality movies that can be embedded into your HTML

Support of Old Browsers

There are still a surprisingly high amount of people using old browsers that are not supporting HTML5, e.g. Internet Explorer 8.

Therefore an additional fall back to Flash is recommended.

Since Flash support MP4 there is no additional transcoding process necessary.

After some searching I found a Flash player without frills here: http://code.google.com/p/flashfox/ .

Using this player the code looks like:

<video width="640" height="360" controls poster="poster.jpg">
  <source src="myVideo.mp4" type="video/mp4">
  <source src="myVideo.webm" type="video/webm">
  <object type="application/x-shockwave-flash" 
          data="flashfox.swf" 
          width="640" height="360">
    <param name="movie" 
           value="flashfox.swf" />
    <param name="allowFullScreen" 
           value="true" />
    <param name="wmode" 
           value="transparent" />
    <param name="flashVars" 
           value="controls=true&poster=poster.jpg&src=myMovie.mp4" />
   <img alt="MyTitle" src="poster.jpg" width="640" height="360" 
        title="Upps, no video playback capabilities??" />
  </object>
</video>

Please note: the flashVars parameter must be URL encoded, so instead of using : and / one has to write %3A and %2F.

Finally here a screenshot of this Flash player on Internet Explorer 8 (showing: http://www.mombari.com/ ) :

Using Flashfox as Flash Player

If there is an error when testing the video in Firefox then most probably you need to adjust the meta-data for your video file. How to accomplish this in the Amazon’s AWS console is described in part 1 of the blog post.

Wish List

Great would be a screencast tool that would support this process by a simple button click. And it would be a dream if it would also support uploading the movie to Amazon’s servers automatically 🙂