AWS Documentation » Amazon CloudFront » Developer Guide » CloudFront Tutorials » On-Demand Video Streaming Using CloudFront and JW Player	« Previous Next »
	Did this page help you? Yes \| No \| Tell us about it...

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 from Longtail Video 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 6.1. For more information about JW Player, go to the Longtail Video website. For a list of the video formats that JW Player supports, go to the JW Player Tech Specs page.

For more information about streaming media using CloudFront, see Working with Streaming 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

If you don't already have the files for the JW Player media player, download the player from the JW Player page on the Longtail Video website. Then extract the contents of the .zip file.
Sign in to the AWS Management Console and open the Amazon S3 console at https://console.aws.amazon.com/s3/.
In the Amazon S3 console, click Create Bucket.
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.
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.
Click Create.
Select your bucket in the Buckets pane, and click Upload.
On the Upload - Select Files page, click Add Files, and add the following files:
- jwplayer.flash.swf
- jwplayer.html5.js
- jwplayer.js
- Your .mp4 or .flv media file.
Grant public read permissions for the files that you added in the previous step.
1. Click Set Details.
2. On the Set Details page, click Set Permissions.
3. On the Set Permissions page, click Make everything public.
Click Start Upload.

Creating CloudFront Download and Streaming Distributions

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

To create a CloudFront download distribution for your JW Player files

Open the Amazon CloudFront console at https://console.aws.amazon.com/cloudfront/.
Click Create Distribution.
On the first page of the Create Distribution Wizard, accept the default selection, Download, and click Continue.
On the second page of the wizard, click 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 click 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 streaming distribution for your media file

In the CloudFront console, click Create Distribution.
In the Create Distribution Wizard, click Streaming, and click Continue.
On the second page of the wizard, click 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 click 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

The following example shows you how to embed a video in a web page using the download and streaming distributions that you created in Creating CloudFront Download and Streaming Distributions. Perform the following steps:

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:
- DOWNLOAD-DISTRIBUTION-DOMAIN-NAME
- STREAMING-DISTRIBUTION-DOMAIN-NAME
- VIDEO-FILE-NAME
Save the file with a .html filename extension, for example, jwplayer-example.html.

<HTML>
<HEAD>
<TITLE>Amazon CloudFront Streaming with Longtail Video JW Player 6</TITLE>	

<!--  This HTML file plays an .mp4 or .flv media file using JW Player 6.
The following code is from the Longtail Video Setup Wizard at 
http://www.longtailvideo.com/support/jw-player-setup-wizard.
-->

<!-- Call the JW Player JavaScript file, jwplayer.js. 
Replace DOWNLOAD-DISTRIBUTION-DOMAIN-NAME with the domain name of your 
CloudFront download distribution, for example, d1234.cloudfront.net 
(begins with "d"). This causes a browser to download the JW Player file 
before streaming begins.
-->

<script type='text/javascript' src='https://DOWNLOAD-DISTRIBUTION-DOMAIN-NAME/jwplayer.js'></script>

</HEAD>

<BODY>
<H1>This video is streamed by CloudFront and played by JW Player 6.</H1>

<!-- Replace STREAMING-DISTRIBUTION-DOMAIN-NAME with the domain name of your 
streaming 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.
-->

<div id='mediaplayer'></div>
<script type="text/javascript">
   jwplayer('mediaplayer').setup({
      file: "rtmp://STREAMING-DISTRIBUTION-DOMAIN-NAME/cfx/st/VIDEO-FILE-NAME",
      width: "720",
      height: "480"
   });
</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

Open the Amazon S3 console at https://console.aws.amazon.com/s3/.
Select your bucket, and click Upload.
On the Upload - Select Files page, click Add Files, and add your HTML file.
Grant public read permissions for the HTML file that you added in the previous step.
1. Click Set Details.
2. On the Set Details page, click Set Permissions.
3. On the Set Permissions page, click Make everything public.
Click Start Upload.
To play the video, enter the following URL in a web browser:
http://domain name of your CloudFront distribution/your HTML file name

Document Conventions	« Previous Next »
Terms of Use	Did this page help you? Yes \| No \| Tell us about it...