download free 30 days trial version buy bucket explorer
Documentation  Download  Purchase  Support  FAQs   Forum   ScreenShots & Demos

CloudFront - How to Stream FLV Video from CloudFront?

We often face a situation where we need to display a flash demo or video to our intended audience. Using S3 services of Amazon, it becomes like a cake walk. To stream content, you need to provide two types of files: media files (flv, mp3, mp4, etc) and the playback client (JW, Player, Flowplayer, etc) . CloudFront is used to serve both the client and media files, so you need to use two types of distributions: a basic distribution for the client, and a streaming distribution for the media files. You can also use streaming distribution for both types of files. Here are the steps to follow to display such animated files on your web page(s) using your Bucket Explorer account. Here we have unveiled the steps for you. Take a look.

  1. Launch Bucket Explorer and login.
  2. Select a Bucket and list its objects.
  3. Explore file system from left tree and select Playback client and Media Files to upload.
    • Playback Clients (download latest versions)

      • For configuring JW Player , you need the following files:
        1. player.swf
      • For configuring Flowplayer , you need the following files:
        1. flowplayer 3.1.4.min.js
        2. flowplayer 3.1.5.swf
        3. flowplayer.rtmp 3.1.3.swf
        4. flowplayer.controls 3.1.5.swf
    • Media Files

      1. MP3 File
      2. FLV File
  4. Upload client files and media files as usual to the Bucket.
  5. Create Streaming Distribution on the Bucket.
  6. Set Read permission to All Users on all the uploaded files.
  7. Generate public URL . (This will be used soon.)
  8. If you are using coding method, copy the required code to configure your player given below in a text file. Make changes as per your description.
    • Code for configuring JW Player to play MP3 files-

      <object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' width='470' height='320' id='single1' name='single1'>
          <param name='movie' value='http://examplebucketname.s3.amazonaws.com/player.swf'>
          <param name='allowfullscreen' value='true'>
          <param name='allowscriptaccess' value='always'>
          <param name='wmode' value='transparent'>
          <param name='flashvars' value='file=examplemp3filename.mp3&streamer=rtmp://sexampledomainname.cloudfront.net/cfx/st&provider=rtmp'>
          <embed id='single2'
                 name='single2'
                 src='http://examplebucketname.s3.amazonaws.com/player.swf'
                 width='470'
                 height='320'
                 bgcolor='#ffffff'
                 allowscriptaccess='always'
                 allowfullscreen='true'
                 flashvars='file=examplemp3filename.mp3&streamer=rtmp://sexampledomainname.cloudfront.net/cfx/st&provider=rtmp'
          />
       </object>
    • Code for configure JW Player to play FLV files-

      <object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' width='470' height='320' id='single1' name='single1'>
          <param name='movie' value='http://examplebucketname.s3.amazonaws.com/player.swf'>
          <param name='allowfullscreen' value='true'>
          <param name='allowscriptaccess' value='always'>
          <param name='wmode' value='transparent'>
          <param name='flashvars' value='file=exampleflvfilename.flv&streamer=rtmp://sexampledomainname.cloudfront.net/cfx/st&provider=rtmp'>
          <embed id='single2'
                 name='single2'
                 src='http://examplebucketname.s3.amazonaws.com/player.swf'
                 width='470'
                 height='320'
                 bgcolor='#ffffff'
                 allowscriptaccess='always'
                 allowfullscreen='true'
                 flashvars='file=exampleflvfilename.flv&streamer=rtmp://sexampledomainname.cloudfront.net/cfx/st&provider=rtmp'
          />
       </object>
       
    • Code for configure Flowplayer to play MP3 files-


                <script type="text/javascript" src="http://examplebucketname.s3.amazonaws.com/flowplayer-3.1.4.min.js"></script>
                <div id="page">
                <div id="rtmpPlayer" style="display:block;width:1000px;height:500px;"></div>
                <script type="text/javascript" charset="utf-8">
                    flowplayer("rtmpPlayer", "http://examplebucketname.s3.amazonaws.com/flowplayer-3.1.5.swf", {
                    clip: {
                        provider: 'rtmp',
                        url: "mp3:examplemp3filename",
                        scaling: "fit",
                        autoPlay: false,
                        autoBuffer: true,
                        bufferLength: 10
                    },
                    plugins:  {
                        rtmp: {
                               url: 'http://examplebucketname.s3.amazonaws.com/flowplayer.rtmp-3.1.3.swf',
                     durationFunc: 'getStreamLength',
                               netConnectionUrl: 'rtmp://sexampledomainname.cloudfront.net/cfx/st'
                            }
                        }
                     });
                </script>
                </div>
          
    • Code for configuring Flowplayer to play FLV files-


              <script type="text/javascript" src="http://examplebucketname.s3.amazonaws.com/flowplayer-3.1.4.min.js"></script>
              <div id="page">
              <div id="rtmpPlayer" style="display:block;width:1000px;height:500px;"></div>
              <script type="text/javascript" charset="utf-8">
                  flowplayer("rtmpPlayer", "http://examplebucketname.s3.amazonaws.com/flowplayer-3.1.5.swf", {
                  clip: {
                      provider: 'rtmp',
                      url: "flv:exampleflvfilename",
                      scaling: "fit",
                      autoPlay: false,
                      autoBuffer: false,
                      bufferLength: 10
                      },
                      plugins:  {
                          rtmp: {
                          url: 'http://examplebucketname.s3.amazonaws.com/flowplayer.rtmp-3.1.3.swf',
                          netConnectionUrl: 'rtmp://sexampledomainname.cloudfront.net/cfx/st'
                                  }
                              }
                      });
              </script>
              </div>
          
  9. In the text file, replace the example URLs with public URLs generated in Step 7.
  10. Copy the domain name of your Bucket. To copy domain name, go to “Distribution -> List Distribution”. Find your bucket from the list and choose right click option “Copy DomainName” .
  11. Now make other changes such as the name of your flv file, js, or swf files.
  12. Save file with HTML extension and upload it in the Bucket.
  13. Set Read permission to it.
  14. Finally, generate public URL of uploaded html pages and share it.

Working samples:

Play flv file using Flow Player Play flv file using JW Player
 
Play MP3 file using Flow Player Play MP3 file using JW Player