Configuring Amazon CloudFront Streaming Using Flowplayer
Configuring Amazon CloudFront Streaming Using Flowplayer
This tutorial provides a brief introduction about how to configure Amazon CloudFront streaming using Flowplayer as your video player. You can read more about Flowplayer at http://flowplayer.org/.
For more information about streaming media, see the Streaming Media on Demand chapter in the Amazon CloudFront Developer Guide.
In order to complete this tutorial, you must first sign up for Amazon S3 and Amazon CloudFront.
Step 1. Download Flowplayer Files
Go to http://flowplayer.org/download/index.html to download the Flowplayer video player. You'll receive a compressed folder, in which you will find three of the four Flowplayer files that you will upload to an Amazon S3 bucket:
| a. | Flowplayer.controls-3.2.2.swf |
| b. | Flowplayer-3.2.2.swf |
| c. | Example/flowplayer-3.2.2.min.js |
The two SWF files are in the root of the compressed folder:
Figure 1.1: The Flowplayer Archive
Inside the 'example' folder you will find the JavaScript file:
Figure 1.2: The Flowplayer Archive (continued)
For the fourth Flowplayer file that you will upload to an Amazon S3 bucket, go to http://flowplayer.org/plugins/streaming/rtmp.html#download, and download the rtmp plug-in, which enables the player to stream video using RTMP.
Figure 1.3: The Flowplayer real-time plugin
Step 2. Upload Files
Upload Flowplayer files and your video file to your Amazon S3 bucket. You could also use your own webserver if you operate one, but for the purposes of this tutorial, we'll assume that you are using Amazon S3. Note that you must first create a bucket if you have not already done so.
To upload a file to Amazon S3, you'll use the AWS Management Console. Go to http://console.aws.amazon.com, and log in with the email address and password associated with your AWS account.
Figure 2.1: Creating a new bucket in the AWS Management Console
We will upload all these files into a single bucket, which we will call "video-tutorial". Note that the first four files are files that you downloaded from the Flowplayer website in step 1.
| a. | Flowplayer controls, flowplayer.controls-3.2.1.swf. This will never be explicitly called in your html document. |
| b. | Flowplayer video player, flowplayer-3.2.2.swf |
| c. | Flowplayer JavaScript file, flowplayer-3.2.2.min.js |
| d. | Flowplayer real-time plugin, flowplayer.rtmp-3.2.2.swf |
| e. | Your video file, .mp4 in this case. You can also play .flv, .avi, or other video formats. |
| f. | Optional: your splash image. This image appears when the player is loaded, before the viewer clicks on the player. You can use any image you'd like as your splash image as long as it is the same size as your player. |
NOTE: If you have trouble finding the necessary files when using the console to upload, simply copy and paste those files into another folder or onto your desktop.
Figure 2.2: Uploading files using the AWS Management Console
Be sure to make each of these files public! You can do so when you upload them, by clicking on 'Set Permissions' next to 'Start Upload' , and then checking the 'Make everything public' checkbox:
Figure 2.3: Setting Permissions
Alternatively, you can do so in the permissions or simply by highlighting the files you want to make public and right-clicking on them and selecting 'Make Public':
Figure 2.4: Making Objects Public
Step 3. Create Your Streaming Distribution
Go to the Amazon CloudFront tab of the console and make a streaming distribution of the bucket with the 6 files above.
Figure 3.1: Creating a Streaming Distribution
Note, initially your distribution will under "State" it will say "InProgress" (Figure 3.2).
Figure 3.2: Newly Created Distribution
After 10 or 15 minutes, Amazon CloudFront will finish creating the distribution, at which point it will say "Deployed" (Figure 3.3).
Figure 3.3: Deployed Streaming Distribution
Step 4. Create an HTML Page for Your Video
Take the html code below and replace all RED items with the proper URLs.
- In four places, replace YOUR_BUCKET with the name of your Amazon S3 bucket.
- Replace YOUR_VIDEO_FILES_WITHOUT_EXTENSION with the name of your video.
- Replace YOUR_SPLASH_IMAGE with the name of your splash image
- Replace YOUR_CLOUDFRONT_STREAMING_DISTRIBUTION with the name automatically generated for your streaming distribution (for example, 's1jng015tymskd.cloudfront.net' in the example above).
Note that you can add other content and formatting to this page.
For an MP4 Video:
<!-- THIS IS A BASIC HTML FILE TO PLAY MP4's USING FLOWPLAYER --> <HTML> <HEAD> <TITLE> Streaming Video with Flowplayer </TITLE> </HEAD> <BODY> <!-- Put a header above your video, if you like --> <H1>This is my header</H1> <!—This is where you call on the required JavaScript file. You uploaded this in step 2c; you can recognize it by the .js suffix --> <script src="http://s3.amazonaws.com/YOUR_BUCKET/flowplayer-3.2.2.min.js"></script> <!-- Style section. This is where you can specify attributes of the player, like height, width, color, etc --> <style> a.rtmp { display:block; width:640px; height:360px; margin:25px 0; text-align:center; background-color:black; } </style> <!-- Specify the name of your video in the href- attribute below. You uploaded this in step 2e; in this example it is an .mp4 file. When playing mp4s, you must write it as you see it below--mp4:NAME_OF_FILE (Note the .mp4 file extension is removed.) In the img tag, specify your splash image. Be sure it is the same size as your player. This code is optional — if you do not want a splash image, delete this line. --> <a class="rtmp" href="mp4:YOUR_VIDEO_FILE_WITHOUT_EXTENSION"> <img src="http://s3.amazonaws.com/YOUR_BUCKET/YOUR_SPLASH_IMAGE" alt="PLAY ME"> </a> <script type="text/javascript"> <!-- Specify your player below. You uploaded this in step 2b --> $f("a.rtmp", "http://s3.amazonaws.com/YOUR_BUCKET/flowplayer-3.2.2.swf", { // This next code configures the player to use rtmp plugin for streaming. clip: { provider: 'rtmp' }, // Here is our rtpm plugin configuration plugins: { rtmp: { <!-- This is where you call on the rtmp plugin. You uploaded this in step 2d. It is recognizable by its .swf suffix and the section with 'rtmp' in the file name --> url: 'http://s3.amazonaws.com/YOUR_BUCKET/flowplayer.rtmp-3.2.1.swf', /* "netConnectionUrl" below defines where the streams are found; this URL is specific to Amazon CloudFront. it is the address you are given when you made a streaming distribution of the bucket in which your video resides, ending in .cloudfront.net. YOU *MUST* ADD "/cfx/st" IN ORDER TO ENSURE THAT YOUR VIDEO WILL STREAM. Mine would read 'rtmp://s1jng015tymskd.cloudfront.net/cfx/st' */ netConnectionUrl: 'rtmp://YOUR_CLOUDFRONT_STREAMING_DISTRIBUTION.cloudfront.net/cfx/st' } } }); </script> </BODY> </HTML> <!--Common problems: - You cannot have any spaces in any of your URL's (including your 'rtmp://...' URL) (i.e., http:// thereisaspaceatthebeginninghere.xxx) - Be sure you are calling the correctly numbered version of the flowplayer objects/players (i.e. flowplayer-3.2.2.swf - You cannot have duplicates of 's3.amazonaws.com' or 'cloudfront.net' in the same address (i.e. (http://s3.amazonaws.com/s3.amazonaws.com/YOUR_BUCKET/player.swf) - There is a different naming protocol for mp4 vs flv files. For .mp4 files, YOU MUST write it as 'mp4:YOUR_VIDEO_FILE_WITHOUT_THE _MP4_SUFFIX'. For .flv files, you simply write the name of the file, 'YOUR_VIDEO_FILE_WITHOUT_THE_FLV_SUFFIX'. -->
For an Adobe Flash Player .FLV Video:
<!-- THIS IS A BASIC HTML FILE TO PLAY A .FLV VIDEO USING FLOWPLAYER --> <HTML> <HEAD> <TITLE> Streaming Video with Flowplayer </TITLE> </HEAD> <BODY> <!-- Put a header above your video, if you like --> <H1>This is my header</H1> <!—This is where you call on the required JavaScript file. You uploaded this in step 2c; you can recognize it by the .js suffix --> <script src="http://s3.amazonaws.com/YOUR_BUCKET/flowplayer-3.2.2.min.js"></script> <!-- Style section. This is where you can specify attributes of the player, like height, width, color, etc --> <style> a.rtmp { display:block; width:640px; height:360px; margin:25px 0; text-align:center; background-color:black; } </style> <!-- Specify the name of your video in the href- attribute below. You uploaded this in step 2e; in this example it is an ..flv ile When playing .flv, you must write it as you see it below--NAME_OF_FILE (Note the .flv file extension is removed.) In the img tag, specify your splash image. Be sure it is the same size as your player. This code is optional—if you do not want a splash image, delete this line. --> <a class="rtmp" href="YOUR_VIDEO_FILE_WITHOUT_EXTENSION"> <img src="http://s3.amazonaws.com/YOUR_BUCKET/YOUR_SPLASH_IMAGE" alt="PLAY ME"> </a> <script type="text/javascript"> <!-- Specify your player below. You uploaded this in step 2b --> $f("a.rtmp", "http://s3.amazonaws.com/YOUR_BUCKET/flowplayer-3.2.2.swf", { // This next code configures the player to use rtmp plugin for streaming. clip: { provider: 'rtmp' }, // Here is our rtpm plugin configuration plugins: { rtmp: { <!-- This is where you call on the rtmp plugin. You uploaded this in step 2d. It is recognizable by its .swf suffix and the section with 'rtmp' in the file name --> url: 'http://s3.amazonaws.com/YOUR_BUCKET/flowplayer.rtmp-3.2.1.swf', /* "netConnectionUrl" below defines where the streams are found; this URL is specific to Amazon CloudFront. it is the address you are given when you made a streaming distribution of the bucket in which your video resides, ending in .cloudfront.net. YOU *MUST* ADD "/cfx/st" IN ORDER TO ENSURE THAT YOUR VIDEO WILL STREAM. Mine would read 'rtmp://s1jng015tymskd.cloudfront.net/cfx/st' */ netConnectionUrl: 'rtmp://YOUR_CLOUDFRONT_STREAMING_DISTRIBUTION.cloudfront.net/cfx/st' } } }); </script> </BODY> </HTML> <!--Common problems: - You cannot have any spaces in any of your URL's (including your 'rtmp://...' URL) (i.e., http:// thereisaspaceatthebeginninghere.xxx) - Be sure you are calling the correctly numbered version of the flowplayer objects/players (i.e. flowplayer-3.2.2.swf - You cannot have duplicates of 's3.amazonaws.com' or 'cloudfront.net' in the same address (i.e. (http://s3.amazonaws.com/s3.amazonaws.com/YOUR_BUCKET/player.swf) - There is a different naming protocol for mp4 vs flv files. For .mp4 files, YOU MUST write it as 'mp4:YOUR_VIDEO_FILE_WITHOUT_THE _MP4_SUFFIX'. For .flv files, you simply write the name of the file, 'YOUR_VIDEO_FILE_WITHOUT_THE_FLV_SUFFIX'. -->
