Home » ICanLocalize Blog » Tutorials » Using Amazon S3 to Host Streaming Videos

Using Amazon S3 to Host Streaming Videos

I’ll show you how to deliver high-definition movies from your web pages. This solution boasts high video quality, smooth playback and low-cost.

When we introduce something new, we write about it and we also like to show it in action. There’s nothing better than a short demo movie to explain how things work.

For example, last week we added a new major feature to our system (a translation glossary). To use it properly, translators need to see exactly where to click and what to expect.

So, I wrote a short blog post about it, included a 3 minutes video and we’re all set. About 1000 translators viewed it and a week later, they’re all using the glossary correctly. I’m happy.

Our setup for web videos

It’s a bit of a long chain, so here goes:

  1. Produce the video: I’ve use both Instant Demo, Jing and Camtasia Studio.
  2. Upload to Amazon S3 and make it available for all to read.
  3. Create web access via Amazon CouldFront for that S3 bucket.
  4. Install a Flash movie player on your server. We use JW Player.
  5. Embed videos in your site.

And now, the full details…

1. Producing videos

No matter what you use, at the end you need to have a movie file to play. The best is to get an FLV or MP4 file. Inside, they’re pretty similar.

There are a few programs that can help you produce videos. Eventually, we settled on Camtasia Studio. Editing is very convenient and it makes it easy to record a sound track and then add video. If your own voice is good enough (so that you don’t need to get professional narration), Instant Demo will be an excellent option as well.

When you’re done producing the video, get an FLV or MP4 file.

2. Serving videos from Amazon

Amazon S3 quietly became a leading option for remote storage. Their CloudFront system also makes them an excellent choice for a simple Content Delivery Network (CDN).

If you’re not familiar with the terminology (just like I was 3 weeks ago), a CDN is a network of servers, placed in different locations, who can deliver the same contents.

The idea is to deliver large files from a server that’s closest to the client. Pretty simple to explain, but requires serious infrastructure. Apparently, Amazon’s solution is very good.

To get started, you will need to create an account for both Amazon S3 and CloudFront. Head over to Amazon Web Services home page where you can read more about all their services.

2.1. Storing files in Amazon S3

You will need some sort of interface program to store files on Amazon S3. I use the Firefox extension S3 Fox. It’s like a tiny FTP program that allows you to create buckets (S3 top-level directories), store files and read them.

S3 Fox Firefox extension

Steps:

  1. Log in to your AWS account.
  2. Create a new directory (will create an S3 bucket).
  3. Go to that directory.
  4. Upload the file.
  5. Select the file and click on the Edit ACL button.
  6. Make it readable by all.

3. Enabling CloudFront access to your S3 files

Now that the files are in S3, you need to add the CloudFront access.

Go to your AWS account and click on the CloudFront tab. Then, click on Create distribution.

CouldFront new distribution panel

You can choose between Download and Streaming.

Download means your files will be served like regular HTTP downloads (like files that you download normally to your browser).

Streaming means files will be sent in small chunks to the client. The advantages in streaming distribution is that clients can quickly skip ahead. Downloaded files need to be read from start to stop.

The Flash display component can read just fine using both delivery methods. I’ve seen a dramatic speed difference between the two. The Download delivery worked way faster than the Streaming delivery. It could be a result of other factors, but we’re using only Download at the moment.

The CNAME is an optional field. It will allow accessing the files from a name in your domain. We don’t use it, as nobody needs direct access to downloading our videos.

Before you continue, test it. Open a browser, point it to the distribution you’ve just created and the file that you uploaded. Your browser should download/play the video.

Note: the CouldFront distribution that you create is for an entire Bucket (top-level directory). It will allow serving all the files that you upload to it.

4. Installing a Flash player

A Flash player is the piece of code that sits between the files (in Amazon) and the browser.

It’s a Flash program, so it runs on the visitor’s browser. It reads the movie from the web, adds playback controls and displays the movie on the screen.

We use JW Player. It’s a simple and lightweight player and also includes tons of plugins, which we still haven’t started exploring. For basic video playback, you just need the player and nothing more.

  1. Download the player.
  2. Unzip it on your web server.
  3. Run the sample clip and see that everything works.

Now, you have your own Flash player and you can play any movie in your site (not just the demo that came with the player).

5. Embed videos in your site

JW player comes with a handy setup wizard that will allow you to create the HTML code for your own movies.

You’ll get a piece of HTML that you can just copy/paste to your site.

I preferred to edit the HTML code directly, without using the wizard. After two rounds, it works faster for me than going through the web wizard just for changing a couple of parameters.

Here is a sample HTML code for our own video (that Glossary how-to):

<script src="http://www.onthegosystems.com/mediaplayer/swfobject.js" type="text/javascript"></script>

<div id="mediaspace">This text will be replaced</div>

<script type="text/javascript">// <![CDATA[
var so = new SWFObject('http://www.onthegosystems.com/mediaplayer/player.swf','mpl','640','467','9');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addParam('wmode','opaque');
so.addVariable('file','http://d1ftqtsbckf6jv.cloudfront.net/using_glossaries.mp4');
so.write('mediaspace');
// ]]></script>

Note: this script assumes an ID with a name. If you’re embedding more than one video on the same page, you’ll need to use the HTML code directly and not this cool JS.

This code uses JW Player’s JavaScript to create the HTML. It’s a smart thing. Different browsers support different HTML to play videos. Instead of creating an overly complicated HTML that runs on all browsers, you’ll get the minimal code per browser.

And you’re good to go!

Here is this code running live:

This text will be replaced

56 responses to “Using Amazon S3 to Host Streaming Videos”

  1. Nicholas Hebb

    Nice tutorial. Does Amazon provide any reporting services for download count?

  2. Gogo | Denver Business Networking Group

    Amir,

    Great job of explaining what really can seem like a confusing process. Only after you have it figured out does it seem non-techie and easy to do.

  3. Alex K.

    Amir,

    Is it possible to configure RTMP on S3 so that a user can skip to a certain part of the video buffer it buffers to that point? The way I understand the current configuration you’ve described is that the user must still “stream” the video in a linear fashion, from beginning to end.

    I have a few lectures that are about an hour long that are .mp4’s; it would be beneficial for the students if they could just skip to the 45 minute mark if that’s all they need to view from the content.

    Thanks,

    -Alex

  4. Download Movie Central

    Hi Amir,

    Excellent tutorial.

    Do you actually provide doing this as a service for us not so
    technical folk?

    Like I have a site I want this set up on and implemented.

    Do you do that? Set it up etc?

    If so what would the costs be.

  5. Download Movie Central

    I kind of Got lost here with this part.

    “Before you continue, test it. Open a browser, point it to the distribution you’ve just created and the file that you uploaded. Your browser should download/play the video.”

    I have everything else down so far but that.

    🙁

  6. Keith Murray

    Hi All,

    I have my streaming buckets working fine and my videos are streaming fine but I’m having an issue forcing the video to stream in a pre-designed window using dreamweaver (or any other html editor for that matter). I’m not sure if I am entering the correct paths to my videos; they just don’t play.

    The file is an .swf that points to the .f4v in my streaming bucket

    Any help would be greatly appreciated!

    Keith

    below is the code I am using with an example of the path to my files:

    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

    test video


    <!–

    Content on this page requires a newer version of Adobe Flash Player.

    <!–

    swfobject.registerObject(“FlashID”);

  7. Keith Murray

    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

    test video


    <!–

    Content on this page requires a newer version of Adobe Flash Player.

    <!–

    swfobject.registerObject(“FlashID”);

  8. Pablo

    Amir, this is great. Thank you for taking the time to make this tutorial, its clear, consice and to the point. Great work.
    Cheers,
    Pablo

  9. Grant

    I am trying to understand the advantages of using the JW player over that of the Adobe one that is called via the html generated by camtasia when saving the production. Thanks

    Nicely done tutorial.

  10. Claudia

    Can I do the same with movies in WMV format? Those files were by far the smallest file size, if I convert them in FLV the files get a lot bigger! I want to embed them into wordpress, but even if I put them onto my own server viewing is a problem. Any ideas?

  11. Luis

    Thank you amir.
    You rock man.

  12. Andrea Goodsaid

    Amir –

    Super helpful and JUST when I needed it 🙂

    Appreciate you!

    Andrea

    1. kwameshearrod

      Dont use this method anyone can gain access to the url of your videos and share them. This means they don’t have to see your site to watch your videos. Every time they watch a video you are hosting on your S3 account you pay for it even though they don’t know who you are or have never seen your site.

  13. Hosting av video - Webforumet.no

    […] […]

  14. kwameshearrod

    in step 2 Upload to Amazon S3 and make it available for all to read. This is dangerous because the entire reason you are using amazon is to restrict the the videos to your site alone. Another issue is by making the content readable by all, anyone can watch, download, share, or even place your videos on their site. Since you are PAYING for amazon S3 this means you are PAYING every time someone watches or downloads you video no matter where they are doing this from.

    In short if you are using the video on your site as an income generator or to get people to your site, there may come a time when your paying for bandwidth from amazon but the people using it have never seen your site and have no idea who you are.

    1. brian fidler

      You can set up security and permissions on the bucket where your videos are stored so that it requires a referring URL to allow the video to play. So if a a user tries to show your video from their website, it won’t display at all because the referring URL won’t be from your site.

  15. kwameshearrod

    Also if you look around there are free open source players that do the same thing as JW Player

  16. Craig Pearson

    Would it be possible to do this but with limited access? So that the content can only be streamed within your website and no where else? If So how can this be done?

    Thanks in advance!

  17. Amit

    Hi everybody.
    I need some help.
    I have both S3 and cloudfront account.
    I cannot make the videos run. While running I am getting error that “either video does not exist or access denied”.
    The above error I am getting when I am sending the video link as mentioned in this note. That is
    http://s3gii0b2a8750.cloudfront.net/email+video+2_x264.mp4

    But When I am sending the link with https, that is
    https://s3gii0b2a8750.cloudfront.net/email+video+2_x264.mp4
    The video is running without error but it is not streaming. The complete video is first downloaded, and then playing. Naturally it is taking lot of time.

    My query is How can I set the ACL of the video files to READ ALL.

    Thanks
    Amit

  18. Paul Irvine

    Hi Amir,

    Great tutorial!
    I’ve just begun to dig into S3 since my biz partner and I have launched a motion video service, but there is one fundamental thing I’m just not grasping for some reason.

    The video above you have…is that set to download or streaming?

    I can get the videos working ok on the site, but it seems like they want to download completely before playback can begin…is that what supposed to happen?

    I would like to have this clarified by someone who knows before I start playing with cloudfront!

    Thanks again,
    Paul.

  19. Brad

    Amir, this was a great tutorial. I knew most people used s3 but I had no idea how to set it up. The s3 site is completely confusing and was no help at all. So your tutorial was great. There were still a few things that I had to figure out on my own, but this definitely saved me a lot of time.

    Cloudfront was a good tip and I implemented it. Do you know if I’m going to get charged for my s3 data PLUS the cloudfront data? That would make it double the cost so I’m not sure if it’s totally worth it or not. The flv file I’m streaming is 25mb.

    Thanks

  20. Kirti

    Nice Article…
    You can try my very own tool Bucket Explorer to host your video,Bucket Explorer make your hosting much easier.

    http://www.bucketexplorer.com/documentation/amazon-s3–how-to-stream-flv-video-from-amazons3.html

  21. Mikhail Goncharov

    I’ve used your method but unfortunately it only works with some MP4 files. I am only getting audio on others.

    What might be the reason ?

    Thanks

    Mikhail

  22. David

    Great tutorial! Your a great man for sharing this. Why pay $20 a month?

  23. Abdullah Darwish

    I have created the same example and uploaded a file on the bucket, but the player returns error: video is not found or access denied !!

  24. Abdullah Darwish

    I have created the example on a HTML file, but the player returns the file is not found or access denied.

    also i want to make a streaming on a Nokia mobile player

  25. Rob Cubbon

    Well, it’s taken me all day and 5 or 6 different tutorials but I’ve finally managed it. It was your code that worked. Thanks guys!

  26. John

    Amir,

    Thanks for the tutorial. I am trying to determine if streaming video data is tracked so that I can calculate commissions to video providers based on the frequency their video is viewed. Does Amazon track any streaming data?
    Thanks,

  27. Mark

    Amir,

    Thanks for the great tutorial! I have been having problems using the “STREAMING” Cloud Font distribution channel. I have also been using this http://www.longtailvideo.com/support/jw-player-setup-wizard?example=201 to test it.

    Have you found a way to make the streaming version work?

    Thanks in advance,

  28. RT Duncan

    Hello Amir,

    I have video content on S3. When I try to access the content, my device is defaulting to download the video as opposed to playing/streaming it. What do you think is the issue here? Would this tutorial remedy that?

    Thanks much

  29. Sherwood Tucker

    Hi
    Great article but
    What if I do not want everyone to access the content?
    Is this whatthe authenticated checkbox is for? How does one use this to keep unwanted users from viewingthe files?
    Thanks

  30. Bennie

    Thank you – exactly what I was looking for – much appreaciated and works like a charm!!!

  31. Anthony

    I have been doing this for a while as well, but have not figured out how to have two instances of jwplayer work on the same page. Have you done this with succes? Do you have to have a second instance of jwplayer installed in a different bucket ons3?

  32. Anthony Beardsell

    Thanks Amir. This still works great. I had been following Amazon instructions with much frustration until I found your site. It’s all really simple once you know how! It seems that the videos load much more quickly than with shared hosting, so it’s a success for me.

  33. Primus One

    You’re a hero for posting this Amir.

    In the time since you originally posted this, Amazon’s streaming performance may have improved and their instruction set.

    Nonetheless like Google, their “help” or “how to” sections info can be confusing out of date and otherwise convoluted – if they bother to maintain and update this information at all, which is often doubtful.

    Nice to have clear, concise informaiton from someone who knows what they are talking about.

  34. Anna K.

    Hi guys,

    I need so help, and I think you guys can help… how can I download a file store on Amazon s3 host? I’m just a regular user trying to compile a list of videos for a law learning project I’m working on, here is the file/link I need to download, I have tried many different things like recording with Camtasia Studio, but the audio is pretty bad, try downloading with Realplayer and others unsuccessfully.

    Do I have any hope with this?
    Thanks!
    Anna

  35. Anna K.