Order Now AdSolution Sign Up | Login » Bits on the Run Sign Up | Login »

Using CloudFront

A Content Delivery Network (CDN) offers several advantages over a plain webserver for streaming video. For example, a CDN will be able to speedily deliver your videos across the country and globe, it will be able to stream your videos instead of a download and it will be able to scale to large numbers of videos and viewers.

The Amazon CloudFront CDN is particularly interesting, since everybody can instantly and easily sign up for it. On top of that, Amazon only charges for usage (in terms of GB of video stored and streamed), so there's no fixed costs.

This guide walks you through the steps of signing up with Amazon Cloudfront and configuring the JW Player for playback.

Step 1: Get an Amazon Web Services (AWS) Account

Register for an Amazon Web Services (AWS) account and sign up for Simple Storage Service (S3) and CloudFront. S3 is used for storing your files and CloudFront is used for delivering your files to your audience.

While there is no fee to sign up for AWS, S3, or CloudFront, you will need to provide a credit card to cover data-storage and transfer fees once you start using the services.

Step 2: Upload Your Content to S3

  1. Use your favorite S3 browser (CloudBerry Explorer for Windows or CyberDuck for Mac) to log into S3. If you have not used your S3 client before, be sure to have your security credentials handy.
  2. Create a bucket to store your video files (for example video.mysite.com.
  3. Upload your video files (say example.mp4) into the video.mysite.com bucket.
  4. Update the permissions on the video file, so that others (being Cloudfront) can read it.

Step 3: Create a CloudFront Distribution

  1. Log into the AWS Management Console and click the Amazon CloudFront tab at the top.
  2. In the CloudFront section, Click Create Distribution. The following window will appear:
    CloudFront Distribution Window Detail
  3. Select the Streaming delivery method.
  4. Select the video.mysite.com as the origin.
  5. Click Create. The window will close and you return to the CloudFront status page. Your new distribution is listed, it is currently in progress.
  6. Wait a few minutes for the status of your new distribution to change from InProgress to Deployed. It may take several minutes for your distribution to become available.
  7. When ready, copy the distribution domain name (something like sXXXXXXXXXX.cloudfront.net). This is needed for configuring the player.

Step 4: Configure Your JW Player

Using our example distribution (sXXXXXXXXXX.cloudfront.net) and file (example.mp4), the following JW Player configuration options need to be set:

Using the JW Embedder, this results in the following example embed code:

<div id="container">Loading the player ...</div>

<script type="text/javascript">
    jwplayer("container").setup({
        flashplayer: "/assets/player.swf",
        file: "example.mp4",
        height: 270,
        provider: "rtmp",
        streamer: "rtmp://sXXXXXXXXXX.cloudfront.net/cfx/st",
        width: 480
    });
</script>

That's all there is to it. Your video is now streaming from CloudFront, which means it's reliably delivered to users across the globe. Because the video is streaming (using RTMP), users can seek to not-yet-downloaded parts of the video ánd (due to the small buffer) your storage costs will not go through the roof.

Note: the separate "streamer" and "file" flashvars are needed because playback of RTMP streams is a two-step process. First, the player connects to the RTMP server (the "streamer"), next the player requests the video (the "file") from the server.

Bonus Step: Adding in HTML5 Support

Since the number of iPhone/iPad and Android devices is growing fast, you probably want to make your video available to them too. This is very well possible with the combination of CloudFront and JW Player. Unfortunately, HTML5 does not support any video streaming yet, which means we have to fall back to progressive downloads.

First, go into the AWS Cloudfront console again to create a second, download distribution. The origin bucket for this distribution should be the same as we used for the streaming distribution. The name of the new download distribution will be something like dXXXXXXXXXXXX.cloudfront.net.

Second, update your JW Player configuration, such that it will load the video from the download distribution when in HTML5 mode. The new configuration (more complex!) will look like this:

<div id="container">Loading the player ...</div>

<script type="text/javascript">
    jwplayer("container").setup({
        file: "example.mp4",
        height: 270,
        modes: [{
            type: "flash",
            src: "/assets/player.swf"
        },{
            type: "html5",
            config: {
                file: "http://dXXXXXXXXXXXX.cloudfront.net/example.mp4"
                provider: "video"
            }
        }],
        provider: "rtmp",
        streamer: "rtmp://sXXXXXXXXXX.cloudfront.net/cfx/st",
        width: 480
    });
</script>

In this setup, the configuration options that are inside the HTML5 config block override the default configuration options. If the player detects a device cannot play Flash but can play HTML5, these options are used.

Do note the name and video in the download distribution do need to be concatenated into a single URL!