Video streaming with Amazon CloudFront

Assuming you are building a high-traffic website, you will want to have your videos streamed efficiently to your users. After encoding your videos with Panda, you can stream them through a content delivery network.

By choosing to streaming your videos, users can skip to any point in the video without having to first wait for it to be downloaded as is the case with progressive download delivery.

You will already have an Amazon Web Services account account if you’ve signed up the S3 for storing videos. We recommend using Amazon’s CloudFront CDN.

CloudFront gives you two ways to deliver video content:

• Progressive Download
• Streaming (using RTMP)

The main difference between Streaming and Progressive Download is in how the data is received and stored by the end user.

You can find some documentation on Wikipedia

The document will cover setting up a video streaming. Progressive download is covered by the standard video player integration documentation.

Create a Streaming distribution

Adding Streaming is very easy. Let’s go through all the steps right now.

• First you need to sign in to Amazon and go to the CloudFront console

• Click on button Create Distribution on the top-left corner

A new form will appear.

• Select Streaming as the delivery method
• Select your bucket in the list
• Adding CNAMEs will make the distribution URL nicer (optional)
• Select enabled

It should look similar to this:

• Click on create

Congrats, you now have a streaming distribution!

Play your videos

Before you begin streaming video, you will need to make sure you have a compatible encoding profile setup in your Panda encoding cloud. CloudFront supports both FLV and MP4 streaming. We highly recommend using MP4 as the quality is far superior.

Panda has a handy MP4 preset you can use. Simply head to your Panda account and then edit one of your encoding clouds. At the bottom of the page you will see the ‘Add Profile’ button. Click this and choose ‘MP4 (H.264)’ (use Hi if you would like extra good quality video), feel free the change the dimensions if desired.

Once you’ve setup this profile, you will want to use the generated encodings with the embed code example below.

To take advantage of true streaming you will need to use a Flash player. JW Player or Flowplayer are both great options.

The following code as an example embed using RTMP streaming with JW Player:

<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript"> swfobject.registerObject("player", "9.0.0", "/player.swf"); </script>
<object width='320' height='240' id='player'>
   <param name='movie' value='/player.swf'>
   <param name='allowfullscreen' value='true'>
   <param name='allowscriptaccess' value='always'>
   <param name='wmode' value='opaque'>
   <param name='flashvars' value='file=3ff851d2-d467-11de-87a8-00254bb33798.mp4&streamer=rtmp://s2zw4551q289e3.cloudfront.net/cfx/st&provider=rtmp'>
   <embed id='player'
           src='/player.swf'
           width='320'
           height='240'
           bgcolor='#ffffff'
           allowscriptaccess='always'
           allowfullscreen='true'
           flashvars='file=3ff851d2-d467-11de-87a8-00254bb33798.mp4&streamer=rtmp://s2zw4551q289e3.cloudfront.net/cfx/st&provider=rtmp'
    />
</object>

Before this will work, you will need to change some parameters.

file=the filename of the video in your S3 Bucket. Panda saves files to your bucket with the following convention: $path$$extname$. Please check the API docs, Rails or PHP tutorials for more information about encodings.

streamer=value where value is the the streaming url: $domain_name$/cfx/st. You can find the Domain Name by logging into the Amazon CloudFront console).

Once you’ve set these parameters correctly you’ll have video being streamed to your users!