On-Demand Video Streaming Using CloudFront and JW Player

When you stream media files using CloudFront, you provide both your media file and the media player with which you want
end users to play the media file. To use the JW Player media player to stream media files with CloudFront,
perform the procedures in the following topics:

Uploading Media and JW Player Files to an Amazon S3 Bucket

You can upload your media files and your media player files to the same Amazon S3 bucket or to separate buckets.
For this tutorial, you'll upload an .mp4 or .flv media file and the JW Player media player files to the same bucket.

To upload media and JW Player files to an Amazon S3 bucket

If you don't already have the files for the JW Player media player, download the player (JW Player 7) from the
Downloads page on the JW Player website. Then
extract the contents of the .zip file.

For your bucket to work with CloudFront, the name must conform to DNS naming requirements.
For more information, go to Bucket Restrictions and Limitations
in the Amazon Simple Storage Service Developer Guide.

Select a region for your bucket. By default, Amazon S3 creates buckets in the US Standard region. We recommend that you
choose a region close to you to optimize latency, minimize costs, or to address regulatory requirements.

Choose Create.

Select your bucket in the Buckets pane, and choose Upload.

On the Upload - Select Files page, choose Add Files, and
add the following files:

jwplayer.flash.swf

jwplayer.js

Your .mp4 or .flv media file.

Grant public read permissions for the files that you added in the previous step.

Choose Set Details.

On the Set Details page, choose Set Permissions.

On the Set Permissions page, choose Make everything public.

Choose Start Upload.

Creating CloudFront Web and RTMP Distributions

To configure CloudFront to stream a media file, you need a CloudFront web distribution for the JW Player files and an HTML file,
and an RTMP distribution for the media file. Perform the following two procedures to create a web distribution
and an RTMP distribution.

On the first page of the Create Distribution Wizard, in the Web section,
choose Get Started.

On the second page of the wizard, choose in the Origin Domain Name field, and
select the Amazon S3 bucket that you created in the procedure
To upload media and JW Player files to an Amazon S3 bucket.
If you have a lot of Amazon S3 buckets, you can type the first few characters of the bucket name to filter the list.

Accept the default values for the remaining fields, and choose Create Distribution.

After CloudFront creates your distribution, the value of the Status column for your distribution will
change from InProgress to Deployed. This should take less than 15 minutes.

The domain name that CloudFront assigns to your distribution appears in the list of distributions. The domain name also appears
on the Distribution Settings page for a selected distribution.)

To create a CloudFront RTMP distribution for your media file

In the CloudFront console, choose Create Distribution.

In the Create Distribution Wizard, in the RTMP section,
choose Get Started.

On the second page of the wizard, choose in the Origin Domain Name field, and
select the Amazon S3 bucket that you created in the procedure
To upload media and JW Player files to an Amazon S3 bucket.
If you have a lot of Amazon S3 buckets, you can type the first few characters of the bucket name to filter the list.

Accept the default values for the remaining fields on the Create Distribution page, and choose
Create Distribution.

After CloudFront creates your distribution, the value of the Status column for your distribution will
change from InProgress to Deployed. This should take less than 15 minutes.

The domain name that CloudFront assigns to your distribution appears in the list of distributions. The domain name
also appears on the Distribution Settings page for a selected distribution.

Embedding Video in a Web Page

Sign in to the JW Player website.
If you don't already have a JW Player account, create one.

On the Downloads page, get the
license key for the player that you downloaded earlier in this tutorial.

Copy the HTML code below, and paste it into a text editor.

Review the comments in the HTML file, and replace the following placeholders
with the applicable values:

WEB-DISTRIBUTION-DOMAIN-NAME

RTMP-DISTRIBUTION-DOMAIN-NAME

VIDEO-FILE-NAME

LICENSE-KEY

Save the file with a .html filename extension, for example, jwplayer-example.html.

<HTML>
<HEAD>
<TITLE>Amazon CloudFront Streaming with JW Player 7</TITLE>
<!-- Call the JW Player JavaScript file, jwplayer.js.
Replace WEB-DISTRIBUTION-DOMAIN-NAME with the domain name of your
CloudFront web distribution, for example, d1234.cloudfront.net
(begins with "d"). This causes a browser to download the JW Player file
before streaming begins.
Replace LICENSE-KEY with your personal license key from JW Player.
-->
<script type='text/javascript' src='WEB-DISTRIBUTION-NAME/jwplayer.js'></script>
<script type='text/javascript' src='WEB-DISTRIBUTION-NAME/jwplayer.flash.swf'></script>
<script>jwplayer.key="LICENSE-KEY";</script>
</HEAD>
<BODY>
<H1>This video is streamed by CloudFront and played by JW Player 7.</H1>
<!-- Replace RTMP-DISTRIBUTION-DOMAIN-NAME with the domain name of your
RTMP distribution, for example, s5678.cloudfront.net (begins with "s").
Replace VIDEO-FILE-NAME with the name of your .mp4 or .flv video file,
including the .mp4 or .flv filename extension. For example, if you uploaded
my-vacation.mp4, enter my-vacation.mp4. You might need to prepend "mp4:" to the
name of your video file, for example, mp4:my-vacation.mp4.
If the file is in a subdirectory, include the subdirectory name just before
the file name, for example:
"rtmp://RTMP-DISTRIBUTION-DOMAIN-NAME/cfx/st/sample-directory/VIDEO-FILE-NAME"
-->
<div id="my-video"></div>
<script type="text/javascript">
jwplayer("my-video").setup({
file: "rtmp://RTMP-DISTRIBUTION-DOMAIN-NAME/cfx/st/VIDEO-FILE-NAME",
width: "720",
height: "480",
primary: "flash"
});
</script>
</BODY>
</HTML>

Uploading the HTML File and Playing the Video

To play the video using the HTML file that you created in Embedding Video in a Web Page,
upload the file to your Amazon S3 bucket, and use the URL for your CloudFront distribution.