How to use AWS S3 as Customer Origin for HLS videosPosted: February 19, 2016
Finally I use the famous Amazon Web Service. I use AWS Simple Storage Service (S3) to test something about online videos.
- Web server support of Cross-Origin Resource Sharing (CORS) is a common requirement for video players.
- 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”.
- 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.
- 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!
- Setting Up to Host a Static Website on AWS | AWS
- Enabling Cross-Origin Resource Sharing | AWS
- AWS S3 – No ‘Access-Control-Allow-Origin’ header is present on the requested resource | SO
- Choosing a Video Player: Features and Specs for the Top Five | streamingmedia.com
- FlowPlayer setup guide | Flowplayer
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.