HTML 5 Video with Flash Fallback – A How-To Guide

Here’s a step-by-step guide for setting up HTML 5 video with Flash fallback support in websites.

  1. Use Quicktime Pro and convert video to m4v format
    1. File > Open File > Browse to your video file (load the source video)
    2. File > Export for Web
    3. Check all checkboxes and click OK

 

When conversion is complete, you will see the following files created.

  1. Use Miro to convert the m4v desktop version to webm format
UPDATE: Don’t use Miro to create the webm version. It doesn’t work right in Firefox. Using FFMpeg or maybe Amazon Elastic Transcoder.
Now you will have one more file – myvideo.webm.
  1. Upload the following files to Amazon S3  / CloudFront
  1.  In S3, set up the meta data for the following files as follows:
    1. .m4v, .3gp
      1. Content-Type:  video/mp4
      2. Cache-Control: max-age=31449600
    2. .jpg
      1. Content-Type:  image/jpeg
      2. Cache-Control: max-age=31449600
    3. .mov
      1. Content-Type:  video/quicktime
      2. Cache-Control: max-age=31449600
    4. .webm
      1. Content-Type:  video/webm
      2. Cache-Control: max-age=31449600

The .mov file will determine which version of the m4v to play to optimize streaming based on bandwidth / device.

  1.  Copy and paste this code into your website

https://www.abdullahyahya.com/video-code.txt

After testing, change the URLs to CloudFront URLs. Certain URLs should be URL-encoded. You can use http://meyerweb.com/eric/tools/dencoder/ for that.
Updates:
  • Use Quicktime X instead instead of Quicktime Pro since it offers better encoding settings.
  • Check the bitrate of your source video file. In Quicktime, click on Window > Show Movie Inspector and you will see

In this example, the bitrate is 630 kbits/sec. In Quicktime, if you click on Export for Web, you’ll see the various output bitrates:

In this version of Quicktime, the iPhone bitrate is 900 kbps and the Desktop bitrate is 1.5 Mbps which are both higher than our source video. So, we won’t be able to encode the videos at those bitrates and so there’s no point in encoding them unless we get a higher bitrate source video.

▲