Website Video using Amazon S3, Amazon CloudFront, & JWPlayer

Providing video on the web has been done. It should be simple to get it up and running right? Just a Google search away? Well, one Google search will get hundreds of results all giving different methods, technologies and solutions. The following is a road-map of my path to enlightenment and the eventual solution I employed.

I looked at several commercial hosting solutions including Brightcove, Viddler and Bits on the Run, only to discover that they were expensive to use for a start-up commercial website with a small video library. I also looked at Vimeo but it has a “non-commercial purposes only” clause in their terms of service. Doing what any developer with time on his hands would do, I ventured out to do it myself.

First I needed to understand the basics of video distribution. After learning the basics, I moved on to understanding bitrate encoding and how it affects the user’s streaming experience. Armed with a grasp of the how and the why behind video streaming, I needed to select a technology stack.

Technology Stack

Storage

Amazon S3 – “Amazon S3 is storage for the Internet. It is designed to make web-scale computing easier for developers.” Super easy to setup and upload your videos.

Content Delivery Network

Amazon CloudFront – Integrates with S3 seamlessly and has an easy step-by-step wizard to for configuring it to accessing and distribute your S3 files.

Player

JWPlayer – The two big players I ran across were Flowplayer and JWPlayer. You can’t go wrong with either, but I eventually settled on JWPlayer because I preferred the documentation and available plug-ins.

Distribution

Video Upload and Download
HTTP Streaming – I looked at using RTMP streaming which allows true streaming. Unfortunately, this method alienates users with slow connections that are unable to stream the video without severe interruptions even at the low bitrates. I selected simple HTTP distribution which downloads, buffers and plays the video from a temporary folder on the user’s computer. Users with a slow internet connection can start playing the video and go grab a bite to eat while waiting for their video to finish downloading which allows them to play it without annoying interruptions.

Format and Encoding

Handbrake – I used the multi-platform application Handbrake for encoding my videos. Alternatively encoding.com has an excellent workflow with nice presets to get your videos ready for your website. Longtail video had a good video compression tutorial if you want to learn more. I ended up using MP4 H.264 as my encoding and setup my low-quality video at 640×360 with a bitrate of 400 kbps and my high-quality video at 1280×720 with a bitrate of 2000 kbps.

Getting it all Working

Basic Setup

I started out by following Amazon’s JWPlayer tutorial and supplemented that with JWPlayer’s setup wizard to get the basic structure. I deviated from the tutorial to setup a “Download” CloudFront distribution instead of a “Streaming” by referencing the S3 and CloudFront getting started guide.

Plug-ins

I integrated the JWPlayer HD plugin to allow the user to select between a low-quality and high-quality version of the video. Enabling a JWPlayer skin allowed me to get my desired look and feel. Don’t forget to include a nice preview image for your video. During development I found the JWPlayer quality monitor plugin invaluable.

Gotchas

There was one gotcha I ran into during this process. You need to watch out for Adobe Flash Player’s crossdomain security. I followed the cross domain loading restrictions on LongTail Video’s website to get around the issue.

Code

JWPlayer setup code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<script type='text/javascript' src='http://YOUR-CLOUDFRONT-SPECIFIC-SUBDOMAIN.cloudfront.net/video/swfobject.js'></script>    

<div id='mediaspace'>This text will be replaced</div>
<script type="text/javascript">
  // see http://blog.deconcept.com/swfobject/ for documentation on SWFObject function
  var so = new SWFObject('http://YOUR-CLOUDFRONT-SPECIFIC-SUBDOMAIN.cloudfront.net/video/player.swf','mpl',"640","360",'9');  
  so.addParam('allowfullscreen','true');
  so.addParam('allowscriptaccess','always');
  so.addParam('wmode','opaque');

  // see documentation on configuration options http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/12536/configuration-options
  so.addVariable('file',   "http://YOUR-CLOUDFRONT-SPECIFIC-SUBDOMAIN.cloudfront.net/video/YOUR_LOW_QUALITY_VIDEO_FILE.mp4");
  so.addVariable('hd.file',"http://YOUR-CLOUDFRONT-SPECIFIC-SUBDOMAIN.cloudfront.net/video/YOUR_HIGH_QUALITY_VIDEO_FILE.mp4");
  so.addVariable('plugins','hd');
  so.addVariable('skin',"http://YOUR-CLOUDFRONT-SPECIFIC-SUBDOMAIN .cloudfront.net/video/glow.zip");

  so.addVariable('dock','false');
  so.addVariable('controlbar','over');
  so.addVariable('controlbar.idlehide','true');
  so.addVariable('bufferlength', 5);
  so.addVariable('image',"http://YOUR-CLOUDFRONT-SPECIFIC-SUBDOMAIN .cloudfront.net/video/video_splash.jpg");

  so.addVariable('stretching','fill');
  
  so.write('mediaspace');
</script>

Result

You can see the setup in action on the home page of Kidtelligent.

Conversation
  • S3 Browser says:

    Just wanted to add: for uploading large video files you may want to use desktop based tools which supports new Amazon S3 feature called Multipart Upload.

    This may greatly speed up uploading process as well as provide you ability to pause and resume your uploads.

    One of such tools is S3 Browser freeware. Try it and you will see the difference.

  • Phil Duncan says:

    Thanks for taking time to craft a well written and very informative post. It will probably save me TONS of time.

  • Larry Hagman says:

    Super helpful article. This is the “little” project I take a look at every six months to see if it’s easier. The promise of html5 was going to solve everything and that hasn’t happened either it seems. Is there any open source or freeware program that got you 90% the way there? Any chance these steps could be consolidated into a series of actions with tips along the way? That way it’s not a program and you wouldn’t be stepping on anyone’s toes? Hell, I’d settle for a YouTube of your workflow process.

  • Gr007 says:

    Nice Article….
    Its really nice to use Desktop tools for S3 it solves your problem as well handle the content on S3 in a much simpler way for you….I am enjoying working with toll Bucket Explorer you can use it to upload download as well many more features,it is the only tool providing MD5 check for uploaded file on S3… Its seems like perfectly file uploaded on S3 without any problem mismatch and interrupted and noise data….It supports Multipart upload to upload large data on S3….It helps to manage Amazon S3,import export,Cloud front etc..many services…just simple a fan of these services…

  • Kirti says:

    Hello,
    Amazon S3 is really nice service provider world wide and most demanding.
    I am one of the developer team member of Bucket Explorer, an Amazon S3 client tool.Bucket Explorer is design in an user freindly manner. It will help you to intract and understand the Amazon S3.
    New version of Bucket Explorer is fetured with Multipart-Upload,Multipart-Downlaod as well many more…
    http://www.bucketexplorer.com/

  • Justin says:

    Great post Greg. Awesome structure and clarity (yes I’m one of the ones who’s spent days trying to find a post like this!)

    I’ve been experimenting with JW PLayer + Flow player. But so far, when testing them versus a Youtube embedds they seem to take longer to start playing. I must be doing something wrong..

    Question: what compression settings do you use before uploading to Amazon S3? I use FCP compresser and been using ‘video sharing services’ setting h.264, 720p. – should be using ‘HTTP Live streaming’ setting instead?

    So far JW player ‘works’ but it keeps stopping / buffering

    Justin

  • Comments are closed.