Category Archives: Cloud

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

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

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&amp;poster=poster.jpg&amp;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

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 🙂

Distributing HTML5 videos with the Amazon CloudFront CDN – Part II

In part 1 of the blog post we set up an Amazon S3 and CloudFront account for hosting of our videos. In this part we discuss how to embed these videos into a HTML page.

Simple Embedding of Screencasts in HTML5

One fundamentally useful tool in sharing how-to-dos is a screencast. In earlier years I used to save it as Flash directly from the screencast tool. Today I want to use the HTML5 video tag, because it’s supported natively by all modern browsers and on mobile devices.

Referencing the video movie in HTML seems easy and self-explanatory:

<video width="640" height="360" controls poster="http://vdemo2.software7.com/poster.jpg">
    <source src="http://vdemo2.software7.com/Test.mp4" type="video/mp4">
</video>

A few things should be noted:

  • we are using links to the CloudFront service that we set up in the previous blog post (vdemo2.software7.com is mapped via a DNS CNAME entry to Amazon’s CloudFront)
  • not all HTML5 browsers can play MP4 video, most notably Mozilla Firefox
  • people are still using old browsers without HTML5 capabilities

In Part 3 of the blog post, we will introduce the alternative WebM format for web browsers that do not support MP4, as well as present a simple Flash fallback for very old browsers.

Randomly Seeking

Particularly at longer screencasts it is important that the viewer can seek anywhere as desired regardless of how much of the movie was already downloaded.

There are quite a bit bogus or misleading information, stating that this is not possible with HTML5 video, as real streaming is not supported.

But randomly seeking is supported in HTML5 video without the need for a special player or a special streaming server by a technique known as pseudo-streaming.

How does that work?

By using a HTTP proxy tool we can demystify it:

HTTP Byte-Range Request

HTTP Byte-Range Request

– if the user seeks then the HTML5 browser requests only a part of the movie via a HTTP/1.1 byte-range request
– then the HTTP server returns only the requested amount of data

So what are the requirements for this to work? Obviously on the server side you need a HTTP 1.1 server. On the client side a plain HTML5 browser is sufficient.

Now it should be clear why in part 1 of the blog post, the Download distribution method was chosen.

In order to embed videos for use in the full range of currently used browsers, you must encode your video in an additional format (WEBM). To support old browsers there is still a Flash fallback needed. These will be covered in the next part of the blog post.

Distributing HTML5 videos with the Amazon CloudFront CDN

So, this is part one of a of a multi-part blog post about how to make a HTML5 video available worldwide with low latency and high data transfer speed.

Part 1 is a how-to setup the cloud storage and the content delivery network (Amazon S3 respective Amazon CloudFront).

In part 2 we will discuss some details about HTML5 video, e.g. why to use Amazon’s download distribution instead of the streaming option.

The setup is surprisingly simple:

    • goto aws.amazon.com and sign up
    • choose AWS Management Console
    • choose S3 (Scalable Storage)
      Amazon S3
    • click ‘Create Bucket’
      (a bucket is a kind of root folder)
      Create a Bucket
    • choose a bucket name, I have chosen the name ‘vdemo2’ and being located in Europe as region ‘Ireland’
    • select your bucket and click ‘Upload’
    • click ‘Add Files’
      Upload Files
    • after you have uploaded your file(s), click on the upper right on ‘Properties’ and choose ‘Permissions’
    • click on ‘Add more permissions’, choose ‘Everyone’ from the Grantee combo, and check ‘View Permissions’
      Add Permissions
    • click ‘Save’
    • repeat that for all your uploaded files
    • switch in the ‘Services’ menu to ‘CloudFront’
      CloudFront
    • click ‘Create Distribution’
    • as delivery method choose ‘Download’
      (why using Download as opposed to Streaming is explained in part two of the blog post)
      Delivery Method
    • if you want to use a subdomain of your web site your domain registrar must offer the possibility to add a CNAME record in your custom domain name’s DNS tableCName Entry
  • click ‘Create Distribution’

That’s it – almost. Now Amazon CloudFront distributes your files from the S3 server to the so called edge servers all over the world.

This can take a while. Meanwhile you can:

  • add your CNAME entry to your web server (if you have chosen to use this option)

    • in the AWS management console note your ‘domain name’, something like  ‘d12345678.cloudfront.net’
    • switch to the admin console of your web server and add the CNAME entry, that maps something like ‘yoursubdomain.yourdomain.com’  to ‘d12345678.cloudfront.net’
    • note: DNS changes can take up to several hours till the information is spread around the world
  • add a ‘AWS’ billing alarm, to receive an email whenever the AWS charges exceed a threshold
    AWS Billing Alarm
    Billing Alarm Settings

When you upload .mp4 and .webm videos you need to adjust the meta data of the files. If you are accustomed to Apache web server you would add the Mime-Type settings to the .htaccess file. The Amazon Console offers an UI for these settings:

  • select the video file
  • click on ‘Properties’
  • open ‘Metadata’
  • remove the existing Content-Type
  • add as Content-Type for .webm: video/webm
  • for .mp4 choose the Content-Type: video/mp4
AWS Metadata for WebM

AWS Metadata for WebM

Part two of the blog post shows how to reference the video files and explains some details, e.g. why choosing the Download distribution method instead of the Streaming option.