On-Demand Video Streaming Using CloudFront and Adobe Flash Player

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, click 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. Click Create.

To create a CloudFront download distribution

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

2. Click Create Distribution.

3. On the first page of the Create Distribution Wizard, accept the default selection, Download, and click Continue.

   

4. 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 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 click 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 streaming distribution

1. In the CloudFront console, click Create Distribution.

2. In the Create Distribution Wizard, click Streaming, and click Continue.

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

To create a Flash project using Adobe Flash Builder

1. Start Adobe Flash Builder.

2. On the Flash Builder File menu, click 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, click 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://STREAMING-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 STREAMING-DISTRIBUTION-DOMAIN-NAME with the CloudFront domain name for your streaming 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, click Export Release Build.

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

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

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 click Upload.

3. On the Upload - Select Files page, click 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.

   

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

5. Click Start Upload.

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, click the arrow button.

   The video should begin to play.