HTML5 or flash player for streaming from Amazon Cloudfront

ACF (Amazon CloudFront) Distributions utilise Flash Media Server for RTMP streams so, in themselves, CF Distributions aren't a complete solution in regard to offering streaming capabilities for non-flash players/devices too!

This leaves you with 2 choices;

1. offer streaming only to flash users/devices with a regular, progressive download option via HTML5 OR
2. Setup a WOWZA media server with your content to stream if in HTML mode.

Either way, this can be achieved using the player's modes[] var where you could provide different setup parameters such as the path/file and other variables such as streamer & provider in your playlist/player accordingly.

---

Example Let's presume you have the following setup;

1. A bucket, 'my-music.s3.amazonaws.com/'. This is where you store your media. For instance, 'my-music.s3.amazonaws.com/audio/' for audio and 'my-music.s3.amazonaws.com/video/' for videos.
2. An RTMP streaming distribution with your 'my-music.s3.amazonaws.com/' bucket as the source. This will be your streamer flashvar, something like 'XXXXXXXXXXX.cloudfront.net/cfx/st/'.
3. An MP3 located in the location '/audio/song.mp3'.

---

To make this work in either Flash (with RTMP stream) OR HTML5 (as a progressive download) you would need to have a player setup as follows...

<script type="text/javascript">
/* set var baseURL to your media BUCKET 
NOT your streaming distribution */
var baseURL = "https://my-music.s3.amazonaws.com/";

jwplayer('mediaplayer').setup({
'id': 'playerID',
 'width': '480',
'height': '270',
'file': 'audio/song.mp3', /* change to your song/video path */
'provider': 'rtmp', 
'streamer': 'rtmp://XXXXXXXXXXX.cloudfront.net/cfx/st/', 
 'modes': [
    {   
        type: 'flash',
        /* set the location of your SWF object */
        src: 'https://my-player.s3.amazonaws.com/plugins/jwplayer/player.swf' 
    },
    {
        type: 'html5',
        config: {
            /* prepend your BUCKET URL (baseURL var) to the file path */
            'file': baseURL + 'audio/song.mp3', 
            /* set provider */
            'provider': 'video'
        }
    }
 ]
});
</script>

Of course, if you're using a CMS, widget, plugin or module to manage your players, you'll probably be able to access & edit these parameters in an admin screen or alternatively, set them programmatically.

One thing to note, is that the order you place the type objects in the mode[] array is the order in which JW player will try to load.

---

For more information, please see JW Embedder Modes here.

Offer Dual streaming If you want to offer streaming using HTML5, you'd use the same approach, changing the streamer, provider attributes in the html5 type object accordingly.

Hope this is helpful!

Gez