How to Setup Amazon S3 Video Streaming with Cloudfront & HTML5

If you care about the speed of your video streaming and want to give a better experience for your visitors, you might wanna consider to use Cloudfront which gives you both progressive download and video streaming (using RTMP). Most people think that working with Amazon S3 & Cloudfront is difficult, but it is not that hard once you have understood how it works.

What is CloudFront?

How to Setup Amazon S3 Video Streaming with Cloudfront & HTML5 (1)

Cloudfront was set by Amazon as a part of their AWS – Amazon Web Services. With the existence of Cloudfront, users will have alternative way to deliver video streaming and media needs with a higher speed in a lower latency. When you use Amazon S3 as a storage with Cloudfront, you will only be charged on a pay as you go basis for the data being stored and transferred. This will save your money because you don’t need to pay an unused storage and bandwidth for your web hosting.

Alright, let’s get started with the process of how this thing works.

Creating Bucket and Upload Video

  • Create your account on S3 and Cloudfront, then sign in to the control panel and activate both services.
  • After it is done, open the console of Amazon S3 here then click Create Bucket
  • Enter your bucket name. Make sure that the name you picked is unique e.g. s3videobucket11 then press Create. For more information about bucket name’s rules, go here.
  • Select your bucket where you want your .mp4 & .webm videos and image clip being stored, then click Add Files.
  • Before you press the Upload button, make sure you set permissions for public by clicking Set Details => Set Permissions => Make Everything Public
  • Hit the Start Upload button.

Creating Cloudfront Distribution

To be able to video streaming with Cloudfront, you need to make your own distribution. Here are the steps to do so:

  • Go to AWS Cloudfront Console
  • Hit Create Distribution
  • Choose the delivery method for Download
  • In case you want to use your own subdomain e.g. xxxxxx.howtotech.org, make sure you fill it in Alternate Domain Names CNAME‘s field. However, if you choose to use the default Cloudfront’s distribution name, then just leave the field blank and then hit Continue
  • Choose the bucket within the Origin Domain Name list
  • Leave the rest fields as default and hit Create Distribution
  • In less than 15 minutes, you will see your distribution status from In Progress to Deployed.
  • Below the Domain Name column, you will see a URL where your video and image stored e.g. xxxxxxx.cloudfront.net

Setup Custom DNS CNAME

Skip this step if you have chosen to use the default Cloudfront’s distribution name.

  • Go to your web hosting cPanel and add a CNAME record to map your domain / subdomain to xxxxxxx.cloudfront.net for your distribution. If this step is unfamiliar for you, please ask your web host provider to do it for you.
  • Once the DNS is propagated within 24-48 hours, you can test it by pinging your URL.

Embed Video using HTML5 for Video Streaming

Copy paste the code below, replace the red URLs with yours, save the file and upload it to your S3 bucket.

<video width="640" height="360" controls preload="auto" poster="http://xxxxxx.howtotech.org/clip.png">
<source src="http://xxxxxx.howtotech.org/test.mp4" type='video/mp4' /> 
<source src="http://xxxxxx.howtotech.org/test.webm" type='video/webm' /> 
</video>

To be able to video streaming most popular browser such as Firefox and Chrome, you will need to encode your video to WebM (VP8). So, how to do it? Go to http://video.online-convert.com/convert-to-webm It’s a free online tool to convert MP4 to WebM or the otherwise. It’s pretty easy to use and all you need to do is adjust the video setting as you want and then hit the Convert button. Voila! Your WebM video is ready to use on your site.

How to Embed Video with Vimeo for Private Video
How to Embed Video with Vimeo without iFrame

Get more stuff like this
in your inbox

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.