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

On-Demand Video Streaming Using CloudFront and Flowplayer for Adobe Flash

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 Flowplayer for Adobe Flash media player to stream media files with CloudFront, perform the procedures in the following topics:

Note

To stream video using CloudFront and Flowplayer for Adobe Flash, your users must enable Javascript in their browsers.

This tutorial is based on version 3.2.12 of Flowplayer for Adobe Flash. For more information about Flowplayer Flash, go to the Flowplayer Flash website. For a list of the video formats that Flowplayer Flash supports, go to Video formats in the Flowplayer developer documentation about the Flowplayer development environment.

Note

Flowplayer has released an HTML 5 version of their media player. The following procedures only work with Flowplayer Flash, not with Flowplayer HTML5.

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

Uploading Media and Flowplayer 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 media file and the Flowplayer media player files to the same bucket.

To upload media and Flowplayer files to an Amazon S3 bucket

  1. Download the following files from the Flowplayer website:

    • The Flowplayer media player. After you download Flowplayer, extract the contents of the .zip file.

    • flowplayer.rtmp-3.2.10.swf. This is a plugin that allows Flowplayer to stream video using the RTMP protocol. The file is available on the RTMP page on the Flowplayer website.

  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 (the Flowplayer version numbers in your files may be different):

    • flowplayer.controls-3.2.12.swf

    • flowplayer-3.2.11.min.js

    • flowplayer-3.2.12.swf

    • flowplayer.rtmp-3.2.10.swf

    • Your media file in .mp4 format

    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 Flowplayer files 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 Flowplayer 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 Flowplayer 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. (It also appears on the General tab 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 Flowplayer 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 General tab for a selected distribution.

Embedding Video in an HTML Page

The following sample HTML file shows you how to stream a video using the web and RTMP distributions that you created in Creating CloudFront Web and RTMP Distributions. To use this sample to stream your video, perform the following steps:

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

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

    • WEB-DISTRIBUTION-DOMAIN-NAME

    • VIDEO-FILE-NAME

    • RTMP-DISTRIBUTION-DOMAIN-NAME

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

  4. Open the .html file in a web browser, and play your video.

<HTML>
<HEAD>
<TITLE>Amazon CloudFront Streaming with Flowplayer</TITLE>	
</HEAD>

<BODY>

<H1>This video is streamed by CloudFront and played in Flowplayer.</H1>

<!-- This HTML file plays an MP4 media file using Flowplayer.

Replace all instances of WEB-DISTRIBUTION-DOMAIN-NAME with the 
domain name of your CloudFront web distribution, for example, 
d111111abcdef8.cloudfront.net (begins with "d").

Update the version number that appears in the flowplayer-version filenames 
with the version number of the files that you downloaded from the Flowplayer website. 
The files may not have the same version number.

Ensure that URLs don't contain any spaces. 
-->

<!-- Call the Flowplayer JavaScript file. -->
<script src="http://WEB-DISTRIBUTION-DOMAIN-NAME/flowplayer-3.2.11.min.js"></script>	

<!-- Style section. Specify the attributes of the player 
such as height, width, color, and so on. 
-->
<style>
a.rtmp {
   display:block;
   width:720px;
   height:480px;   
   margin:25px 0;
   text-align:center;
   background-color:black;
}
</style>

<!--  Replace VIDEO-FILE-NAME with the name of your .mp4 video file, 
excluding the .mp4 filename extension. For example, if you uploaded a file 
called my-vacation-video.mp4, enter my-vacation-video.

If you're streaming an .flv file, use the following format:
<a class="rtmp" href="VIDEO-FILE-NAME"/>
--> 
<a class="rtmp" href="mp4:VIDEO-FILE-NAME"/>

<script type="text/javascript">
$f("a.rtmp", "http://WEB-DISTRIBUTION-DOMAIN-NAME/flowplayer-3.2.12.swf", { 
   // Configure Flowplayer to use the RTMP plugin for streaming. 
   clip: {
      provider: 'rtmp'
   }, 

   // Specify the location of the RTMP plugin.
   plugins: {  
      rtmp: {  
         url: 'http://WEB-DISTRIBUTION-DOMAIN-NAME/flowplayer.rtmp-3.2.10.swf',

         // Replace RTMP-DISTRIBUTION-DOMAIN-NAME with the domain name of your 
         // CloudFront RTMP distribution, for example, s5c39gqb8ow64r.cloudfront.net.
         netConnectionUrl: 'rtmp://RTMP-DISTRIBUTION-DOMAIN-NAME/cfx/st'  
      }
   }
});
</script>

</BODY>
</HTML>