Software7

Personal Developer Notebook

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.