Menu
Amazon CloudFront
Developer Guide (API Version 2016-09-07)

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:

This tutorial is based on the free edition of JW Player version 7.3. For more information about JW Player, go to the JW Player website.

For more information about streaming media using CloudFront, see Working with RTMP Distributions.

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

  1. 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.

  2. Sign in to the AWS Management Console and open the Amazon S3 console at https://console.aws.amazon.com/s3/.

  3. In the Amazon S3 console, choose Create Bucket.

  4. In the Create Bucket dialog, enter a bucket name.

    Important

    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.

  5. 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.

  6. Choose Create.

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

  8. 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.

    Upload files to your Amazon S3 bucket.
  9. Grant public read permissions for the files that you added in the previous step.

    1. Choose Set Details.

    2. On the Set Details page, choose Set Permissions.

    3. On the Set Permissions page, choose Make everything public.

  10. 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.

To create a CloudFront web distribution for your JW Player files

  1. Open the CloudFront console at https://console.aws.amazon.com/cloudfront/.

  2. Choose Create Distribution.

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

    Select Web as the distribution type.
  4. 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.

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

  6. 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

  1. In the CloudFront console, choose Create Distribution.

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

  3. 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.

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

  5. 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

The following example shows you how to embed a video in a web page using the web and RTMP distributions that you created in Creating CloudFront Web and RTMP Distributions.

Perform the following steps:

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

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

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

  4. 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

  5. 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.

To upload the HTML file and play the video

  1. Open the Amazon S3 console at https://console.aws.amazon.com/s3/.

  2. Select your bucket, and choose Upload.

  3. On the Upload - Select Files page, choose Add Files, and add your HTML file.

  4. Grant public read permissions for the HTML file that you added in the previous step.

    1. Choose Set Details.

    2. On the Set Details page, choose Set Permissions.

    3. On the Set Permissions page, choose Make everything public.

  5. Choose Start Upload.

  6. To play the video, enter the following URL in a web browser:

    http://domain name of your CloudFront web distribution/your HTML file name