Software7

Personal Developer Notebook

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.