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

On-Demand Video Streaming Using CloudFront and Adobe Flash 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 Adobe Flash Player to stream media files with CloudFront, perform the procedures in the following topics:

This tutorial uses Adobe Flash Builder version 4.6 to generate the files necessary to stream a video using Adobe Flash Player. For more information about Flash Builder, go to the Flash Builder page on the Adobe website. For information about downloading a free trial version of Adobe Flash Builder, go to the Downloads/Adobe Flash Builder 4.6 page.

For a list of the codecs that Flash Player supports, go to the Supported codecs | Flash Player page on the Adobe website.

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

Creating 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 create one bucket for both a media file and the Flash Player media player files. You'll upload the files later in the process, after you create the Adobe Flash Player files.

To create an Amazon S3 bucket

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

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

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

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

  5. Choose Create.

Creating CloudFront Web and RTMP Distributions

To configure CloudFront to stream a media file, you need a CloudFront RTMP distribution. For this tutorial, you'll also create a CloudFront web distribution to access the .html file that Adobe Flash Builder creates. Perform the following two procedures.

To create a CloudFront web distribution

  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 create 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

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

Creating a Flash Project Using Adobe Flash Builder

You can use Adobe Flash Builder to automatically create a Flash project, which contains all of the files necessary to play a media file using Adobe Flash.

To create a Flash project using Adobe Flash Builder

  1. Start Adobe Flash Builder.

  2. On the Flash Builder File menu, choose New > Flex Project.

  3. Enter the following values:

    • Project name: Enter a name for your project, for example, CloudFrontStreaming.

    • Folder: Specify where you want Flash Builder to save the files for this project. If you don't want to use the default location, uncheck the Use default location checkbox, and choose another location.

      Make note of the location; you'll need it later in the process.

    • Application type: Accept the default value, Web.

    • Flex SDK version: Accept the default value, Use default SDK.

  4. To create the project, choose Finish.

    After Flash Builder creates the project, a new tab that has the name of your project appears in the Flash Builder user interface. The Source button on the <project-name> tab is selected, and the Source page contains several lines of XML code.

  5. Delete the default XML code on the Source page.

  6. Copy the following XML code, and paste it into the blank Source page in Adobe Flash Builder.

    <?xml version="1.0" encoding="utf-8"?>
       <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
          xmlns:s="library://ns.adobe.com/flex/spark"
          xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
       <fx:Declarations>
          <!-- Place non-visual elements here, for example, services and value objects -->
       </fx:Declarations>
       <fx:Script>
          <![CDATA[
             import mx.events.FlexEvent;
             import org.osmf.net.StreamingURLResource; import org.osmf.net.FMSURL;
             protected function vp_preinitializeHandler(event:FlexEvent): void
             {
             var myURL:StreamingURLResource = new StreamingURLResource("rtmp://RTMP-DISTRIBUTION-DOMAIN-NAME/cfx/st/mp4:VIDEO-FILE-NAME-WITHOUT-EXTENSION");
                myURL.urlIncludesFMSApplicationInstance = true;
                myVideoPlayer.source = myURL;
             }
          ]]>
       </fx:Script>
       <s:VideoPlayer id="myVideoPlayer" autoPlay="true" preinitialize="vp_preinitializeHandler(event)"  x="32" y="52"/>
    </s:Application>
  7. In the XML code that you pasted into the Source page, replace the following values:

    • Replace RTMP-DISTRIBUTION-DOMAIN-NAME with the CloudFront domain name for your RTMP distribution, for example, s5c39gqb8ow64r.cloudfront.net.

    • Replace VIDEO-FILE-NAME-WITHOUT-EXTENSION with the name of your video file, but exclude the filename extension. For example, if the name of your video is my-vacation.mp4, enter only my-vacation.

  8. Save your changes.

  9. On the Flash Builder Project menu, choose Export Release Build.

  10. In the Export Release Build dialog box, accept all default values, and choose Finish.

    Flash Builder creates the files for your project and saves them in the location that you specified in Step 3.

Uploading Media and Flash Builder Files to an Amazon S3 Bucket

When you use Adobe Flash Builder to generate the files for streaming media files, you upload media files and Flash Builder files to the same Amazon S3 bucket.

To upload your media and Flash Builder files to an Amazon S3 bucket

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

  2. In the Buckets pane, select your bucket, and choose Upload.

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

    • Your media file

    • The files that Flash Builder generated when you performed the procedure To create a Flash project using Adobe Flash Builder. Upload only the files in the bin-release directory. You can exclude the files in the bin-release/history subdirectory.

    Upload files to your Amazon S3 bucket.
  4. 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.

  5. Choose Start Upload.

Playing the Media File

To play the media file, you display the HTML file that Flash Builder created for your project and that you uploaded to your Amazon S3 bucket.

To play the media file

  1. Enter the CloudFront URL of the HTML file that Flash Builder created for your project by concatenating the following values:

    http://domain-name-for-your-CloudFront-distribution/HTML-file-name

    For example:

    http://d111111abcdef8.cloudfront.net/CloudFrontStreaming.html

  2. In the video player, choose the arrow button.

    The video should begin to play.