Order Now AdSolution Sign Up | Login » Bits on the Run Sign Up | Login »

Embedding an RTMP stream with an HTML5 fallback

Even with the proliferation of devices without Flash, many publishers are continuing to use RTMP because of it's bandwidth efficiency, security, and transition costs. However, you may still want to allow viewers to watch your content on these devices. Here's an example of a player which has been configured to use Flash with RTMP and to fall back to HTML5 with a standard MP4 file:

Alternate mode Configurations

The JW Embedder configuration block can contain an array called "modes", representing the order in which the player will try to embed the various player modes (flash, html5 and download). If the browser does not support the first player mode in the list (or if the media file cannot be played using the first mode), the player will attempt to try the second mode, and then the third.

For each mode, you can also specify an alternate configuration using the config property. Any property listed within the config block will be merged into the default configuration before attempting to play in that mode and then unmerged if it still cannot be played.

In this example, the player will attempt to play in Flash mode first with an RTMP stream, then fail over to HTML5. If HTML5 is unavailable, an image linking to a direct download of the video file is inserted where the player should be.

Embed Code

<script type='text/javascript' src='/jwplayer/jwplayer.js'></script>

<div id='mediaplayer'></div>

<script type="text/javascript">
  jwplayer
('mediaplayer').setup({
   
'id': 'playerID',
   
'width': '480',
   
'height': '270',
   
'provider': 'rtmp',
   
'streamer': 'rtmp://rtmp.example.com/application',
   
'file': 'sintel.mp4',
   
'image': 'http://example.com/thumbs/sintel.jpg',
   
'modes': [
       
{type: 'flash', src: 'player.swf'},
       
{
          type
: 'html5',
          config
: {
           
'file': '/videos/sintel.mp4',
           
'provider': 'video'
         
}
       
},
       
{
          type
: 'download',
          config
: {
           
'file': '/videos/sintel.mp4',
           
'provider': 'video'
         
}
       
}
   
]
 
});
</script>