How to stream FLV video from cloudfront?

We often confront with 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) .As CloudFront is used to serve both the client and the 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 type files. Here are steps you can follow to display such animated files on your web page(s) using your Bucket Explorer account. Here we have unveiled steps for you. Take a look.

1. Launch Bucket Explorer and get login.
2. Select a bucket & list its objects.
3. Explore file system from left tree and select Playback client & Media Files to upload.

4. • Playback Clients -

     • For configuring JW Player you need following files-
       1. player.swf
     • For configuring Flowplayer you need 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
5. Upload client files & media files as usual to the bucket.
6. Create Streaming Distribution on the bucket.
7. Set Read permission to All Users on all the uploaded files.
8. Generate public URL , (This will be used soon.)
9. If you are using coding method, copy codes given below in 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 configuring 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 configuring 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>
         
10. Replace example URL with public URL generated in step 8, copy domain name of your bucket and make other changes such as name of flv file, js or swf files.
11. Save file with HTML extension and upload it in bucket.
12. Set Read permission to it.
13. Generate public URL of uploaded html pages and share it.

Working samples:

Related Topic:

• Host flash website, movies and presentations from Amazon S3