How to use AWS S3 as Customer Origin for HLS videos

Hello AWS!

Finally I use the famous Amazon Web Service. I use AWS Simple Storage Service (S3) to test something about online videos.

Why AWS?

  1. Web server support of Cross-Origin Resource Sharing (CORS) is a common requirement for video players.
  2. AWS is a popular platform. I don’t know how to set up Cross Origin Resource Sharing (CORS) on my existing hosting provider GoDaddy. While there are more Google results about “AWS S3 CORS”.
  3. AWS offers free trial. Many AWS services are free at low volume usages. S3 is free is usage is less than 5GB & 20000 Get Request & 2000 Put Request per month.
  4. GoDaddy becomes more difficult to use. GUI becomes more chaotic and slow!

There are many motivations for me to use AWS. The remaining question is learning curve. I spend sometime of the recent Chinese New Year holidays studying how to use AWS as customer origin for HLS videos. It was quite easy and interesting to learn and use AWS.

And now I am thinking to move my demo sites demo.cheungwaikin.com from GoDaddy to AWS!

Lesson learnt: cloud service provider should provide user-friendly support information and free trial to help people to become its users.

Since HLS is not supported by many desktop browsers, I need to use a video player to help desktop users to view my testing HLS videos. I pick Flowplayer because there is good support information (adequate and useful for me) and it is free (again)!

I created two S3 buckets, one for html files and one for video content. Serve-side CORS support is required by Flowplayer. I used the suggestions from an AWS doc and a StackOverflow discussion (see the online resources below). I verified Access-Control-Allow-Origin response header was returned by AWS S3 by the command curl -sI -H "Origin: http://aws.cheungwaikin.com" -H "Access-Control-Request-Method: GET" s3video.cheungwaikin.com

Below was the command output:

HTTP/1.1 200 OK
x-amz-id-2: ufXH6929lMlXDveTkzj1IDPW1Q1q0/LtW/joHnui0LBM7l0TQ/hNQ59+0mxLUPGjPoBqyxBcopg=
x-amz-request-id: 37DE725CA5A9B471
Date: Sat, 20 Feb 2016 18:32:20 GMT
Access-Control-Allow-Origin: http://aws.cheungwaikin.com
Access-Control-Allow-Methods: HEAD, GET
Access-Control-Expose-Headers: Content-Range, Date, Etag
Access-Control-Max-Age: 600
Access-Control-Allow-Credentials: true
Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method
Last-Modified: Sat, 20 Feb 2016 18:31:34 GMT
ETag: "53252b004b38563c1afdd13a3647b7fa"
Content-Type: text/html
Content-Length: 581
Server: AmazonS3

Moreover, I wrote a simple crossdomain.xml file suggested by FlowPlayer, uploaded it to the video content bucket. With all these, my new testing site aws.cheungwaikin.com is now up and running! I use iPhone, Android 5+ device and MacBook (Safari, Chrome and Firefox) to check browser compatibility.

I am not going to re-invent the wheel. Please find below the online resources I find very useful about how to use AWS S3 as customer origin for HLS videos!

Shalom! Wish you have a great Friday evening!

PS: My CDN demo site demo.cheungwaikin.com will be under re-construction and not available between 26-Feb and 11-Mar.


Hi Year of Monkey! Hi MSE!

Gong Xi Fa Cai! Wish everyone has a happy and healthy Year of Monkey.

It is the fifth day of the new Chinese New Year. It is time to write something new.

I am studying Media Source Extensions (MSE) recently. In a nutshell, MSE enables browsers to play streaming media without plugins.

What is MSE?
-W3C: MSE is a W3C specification that allows JavaScript to send byte streams to media codecs within web browsers that support HTML5 video. The first public draft was released in Jan 2013. Among other possible uses, this allows the implementation of client-side prefetching and buffering code for streaming media entirely in JavaScript.

-Microsoft: build custom adaptive streaming solutions using MSE. Such an adaptive streaming solution would look for the optimal bit rate based on network bandwidth and CPU utilisation to provide the highest quality streaming experience. For example, if the network bandwidth drops, you can use MSE to programmatically switch the video stream to a lower bit rate. This reduces the quality of the image, but allows the video to keep playing without interruptions.

-Netflix: This makes it possible for Netflix to download audio and video content from our content delivery networks and feed it into the video tag for playback. Since we can control how to download the audio/video content in our JavaScript code, we can choose the best HTTP server to use for content delivery based on real-time information, and we can implement critical behaviour like failing over to alternate servers in the event of an interruption in content delivery. In addition, this allows us to implement our industry-leading adaptive streaming algorithms (real-time selection of audio/video bitrates based on available bandwidth and other factors) in our JavaScript code. Perhaps best of all, we can iterate on and improve our content delivery and adaptive streaming algorithms in JavaScript as our business needs change and as we continue to experiment.

More and more video providers are moving away from browser plug-ins to MSE. Youtube and BBC are two examples.

Not all browsers are created equal. At the moment Chrome v34 (both desktop Android 4.4+ versions) and IE 11 on Windows 8 are the best browsers supporting MSE.

Safari on iOS does not support MSE.

Maybe I need an Android tablet.

Ref:
HTML5 Video at Netflix | Netflix

The Current State of Media Source Extensions | Wowza

The State of HTML5 Video | JW Player

How to Build a Streaming HTML5 Video Player | streamingmedia.com

PS: My CDN demo site demo.cheungwaikin.com will be under re-construction and not available between 26-Feb and 11-Mar.