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?
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' />