We learned in a previous post the benefits of using Amazon CloudFront for streaming video. How do we actually get that setup though?
I’m not going to lie, the fleet of Amazon Web Service products (e.g. S3, CloudFront, EC2) are meant for the technically minded folks. So implementation is not the simplest of processes.
But that’s where this post comes in.
If you’re interested in using Amazon CloudFront for your streaming videos, you’ll be embedding videos on your website by the end of this post!
So let’s get started!
Sign-up for Amazon S3 and CloudFront
Go ahead and sign-up for Amazon S3 and Amazon CloudFront. You have to sign-up for each service individually.
Create a New Access Key
Visit the AWS Security Credentials page.
Under the Access Credentials section, click Create a new Access Key
.
Create a Bucket in Amazon S3
Log into the S3 AWS Management Console and click the Create Bucket
button.
Give your streaming bucket a name. It needs to be unique within all Amazon S3 buckets, so I recommend using something like streaming.yourdomain.com
.
If you are closer to the east coast, leave the Region at US Standard
. If you are closer to the west coast, change the Region to Northern California
.
Click Create
.
Create a CloudFront Distribution
Now go to the CloudFront AWS Management Console and click Create Distribution
.
Select Streaming
under Delivery Method (This is an important step. Don’t miss it!). Under Origin select the bucket you just created in Amazon S3.
Click Create
.
Wait a few minutes for the distribution to get created and the State column to say Deployed
. At this point the the distribution is ready to be used.
Take note of the Domain Name column for the distribution you just created (e.g. s26atvxja18lc8.cloudfront.net
).
Upload Video
Go back to the S3 Console by clicking the Amazon S3 tab.
In the left pane, click on the streaming bucket you created earlier and then click the Upload
button.
Now click Add Files
and select your video. The video should be encoded using H.264 for video and AAC/MP3 for audio. You may also use any properly encoded FLV.
If you need a sample video, you can download the Big Buck Bunny short film (62 MB).
Once you’ve added the file, click Set Permissions
and check Make everything public
. Then click Upload
.
Make Sure Everything Works
When the video finishes uploading we need to make sure everything is working properly. We can do that by updating the following link with specifics for your video.
rtmp://DOMAIN_NAME
/cfx/st/_definst_/FILE_NAME
DOMAIN_NAME
– we noted the domain name earlier when we created the CloudFront distribution (e.g. s26atvxja18lc8.cloudfront.net
).
FILE_NAME
– change this to the name of the file you uploaded earlier.
Note: if you uploaded an H.264 encoded video, you will need to prefix the file name with mp4:
(e.g. mp4:BigBuckBunny_320x180.mp4
). If you uploaded an FLV, you do not need a prefix and can simply use the file name (e.g. BigBuckBunny_320x180.flv
).
Now visit the Flash Media Playback Setup page.
Copy the link you created above. It should look similar to: rtmp://s26atvxja18lc8.cloudfront.net/cfx/st/_definst_/mp4:BigBuckBunny_320x180.mp4
On the Flash Media Playback setup page paste the link you just copied into the Video Source input box.
Update the width/height as necessary. Feel free to adjust any of the other settings below width/height if you want. You’ll want to delete the value in the Poster frame file location section. The default poster frame they have specified doesn’t apply to you.
Click the Preview
button.
Now hit the Play button on the video. If everything has been setup correctly you should see your video! Feel free to skip from place to place and enjoy the benefits of CloudFront streaming!
If you’re satisfied with these results, you can copy the Preview Embed Code found below the video and paste it on your website.
For those more web savvy, you may want to embed the video using Flowplayer or JW Player so you can better control the look/feel of the player.
Hopefully this post helps you get up and running using Amazon CloudFront!
Please let me know in the comments if you have any questions or suggestions to make this process easier for others.
steve says
Thanks for doing the hard work of figuring this out and then sharing it!
Alex Tran says
No problem Steve! Hope it helps you some how!
Kevin says
Do the “cfx/st/_definst_” folders need to be created as well or are they irrelevant to uploading the files?
Alex Tran says
Aha! Great question.
They do not need to be created. Those are required by Amazon to access your content no matter where you put the videos.
However, if you decided to put videos in a directory other than the root (e.g. streaming.yourdomain.com => 2010 => videos => example.mp4) then you would include that in the final link (with cfx/st/_definst_) at the end of the folders and before the file name.
So
rtmp://1234.cloudfront.net/2010/videos/cfx/st/_definst_/mp4:example.mp4
.To further confuse you, the
_definst_
is only need if you’re using the Flash Media Playback player. If you plan on using JW Player or Flowplayer you can remove_definst_
from the link.Whew!
Kevin says
Awesome!
That wasn’t too confusing! I’ve used AWS for a while, so I’m slightly used to the oddities.
I’m trying to stream stuff, but I’m stuck buffering…any ideas?
alexandre says
hello
the link for Flash Media Playback Setup is not working anymore. do you know where can we setup the video streaming now?
thanks