Bandwidth detection Make sure you reach your entire audience with good quality

Introduction

The Bandwidth detection plugin monitors the bandwidth that is available to the player. Based on this detection, the plugin selects the stream or file that is best suited to the available bandwidth.

The goal is to offer the best viewing experience possible for an audience with varying Internet connection speeds. People with fast connections are served with HD content; people with slow connections are served with smaller files (i.e. lower bitrate). Playback needs to be uninterrupted while maintaining the best possible video quality.

Video files are encoded with several different bitrates so that good matches are available for the connection speeds that are being targeted.

Download (Version 3.2.5)

Features

• Quality Of Service monitoring and dynamic stream switching.
• Support for progressive download, pseudostreaming (except for php-pseudostreaming), and RTMP.
• Manual selection of the bitrate. Users can be offered the option to select their preferred bitrate.

The player dimensions are considered when selecting the appropriate file. The plugin never selects a file that has dimensions larger than the player's screen. Selecting too large a file would waste bandwidth. When going fullscreen, the player switches to a larger file if available bandwidth permits.

Demo

The player shown below uses dynamic stream switching with Amazon CloudFront. Here is a tutorial about configuring Amazon CloudFront streaming using Flowplayer.

Flowplayer configuration

Here is the configuration for this demo. Check the commented code. The bitrates array is used to specify the video files corresponding to the different bitrates. The bwcheck plugin is simple to configure. Use the dynamic property to enable dynamic switching and quality of service monitoring.

flowplayer("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf", {
    clip: {  
    
       urlResolvers: 'bwcheck',
       provider: 'rtmp',
       autoPlay: false,
       scaling: 'fit',
       
       // available bitrates and the corresponding files. We specify also the video width
       // here, so that the player does not use a too large file. It switches to a 
       // file/stream with larger dimensions when going fullscreen if the available bandwidth permits.
       bitrates: [
         { 
         	url: "mp4:bbb-800", width: 480, height: 270, bitrate: 800,
         	// this is the default bitrate, the playback kicks off with this and after that
         	// Quality Of Service monitoring adjusts to the most appropriate bitrate
         	isDefault: true 
         },
         { url: "mp4:bbb-800", width: 480, bitrate: 800 },
         { url: "mp4:bbb-1200", width: 720, bitrate: 1200 },
         { url: "mp4:bbb-1600", width: 1080, bitrate: 1600 }
       ]
    },
    plugins: {
        
        // bandwidth check plugin
        bwcheck: {  
      	    url: 'flowplayer.bwcheck-3.2.5.swf', 
      	    
      	    // CloudFront uses Adobe FMS servers
      	    serverType: 'fms',
      	    
      	    // we use dynamic switching, the appropriate bitrate is switched on the fly
      	    dynamic: true,
      	    
            netConnectionUrl: 'rtmp://s3b78u0kbtx79q.cloudfront.net/cfx/st',
      	    			
            // show the selected file in the content box. This is not used in real installations.
            onStreamSwitchBegin: function (newItem, currentItem) {
               $f().getPlugin('content').setHtml("Will switch to: " + newItem.streamName + 
                " from " + currentItem.streamName);
            },
            onStreamSwitch: function (newItem) {
               $f().getPlugin('content').setHtml("Switched to: " + newItem.streamName);
            }
        },
        	
        // RTMP streaming plugin
        rtmp: {
        	url: 'flowplayer.rtmp-3.2.3.swf',
            netConnectionUrl: 'rtmp://s3b78u0kbtx79q.cloudfront.net/cfx/st'
        },
        
        // a content box so that we can see the selected video dimensions. This is not used in real
        // installations.
        content: {
            url: 'flowplayer.content-3.2.0.swf',
            top: 0, left: 0, width: 250, height: 150,
            backgroundColor: 'transparent', backgroundGradient: 'none', border: 0,
            textDecoration: 'outline', 
            style: {  
                body: {  
                    fontSize: 14,
                    fontFamily: 'Arial', 
                    textAlign: 'center', 
                    color: '#ffffff' 
                }  
            }  		
        }        
    }
});

Additional demos

• Bandwidth detection with pseudostreaming.

• Let the user select the bitrate.

Configuration

HD button

The HD selection button is is shown in this demo. Here's how to configure it.

To make the button show up in the dock:

hdButton: 'dock'

To make the button show up in the controlbar:

hdButton: 'controls'

To have it in the dock and also in the controlbar:

hdButton: 'both'

Here's how to configure other aspects related to the HD button.

hdButton: {
        place: 'dock',
        // custom labels for the HD splash
        splash: {
            onLabel: 'enabled',
            offLabel: 'disabled'
        }
    }

The hdButton object accepts following properties:

RSS files

You can specify the available bitrates and files in a RSS playlist file. See this demo with a RSS file used to specify the bitrates for more information.

JavaScript API

Methods

Events

Here are the events related to establishing a connection and clustering. Note that if you are not clustering the hosts used for bandwidth checking, the host index will always have a value of zero.

Advanced features

JavaScript Plugin

The source distribution package contains an example JavaScript plugin you can use to generate a bitrate selection user inteface. You can see the bwcheck JavaScript plugin in this demo.

Clustering of bandwidth checks

You can configure an array of hosts to be used for the bandwidth check. The plugin chooses a live host from this array until it finds one that does not fail. This provides a way to add failover. Note that this is not designed to be used with dynamic stream switching as the hosts in the cluster are used only in the initial RTMP bandwidth check call. Here is an example of how to configure clustering for the bandwidth check:

bwcheck: {
        url: 'flowplayer.rtmp-3.1.3.swf',
        serverType: 'red5',

        // the actual streaming happens from this host. In reality you would
        // probably configure a cluster of hosts here too.
        netConnectionUrl: 'rtmp://electroteque.org/bwcheck',

        // the hosts used for the initial bandwidth check
        hosts: [
            {host:'rtmp://electroteque1.org/bwcheck'},
            {host:'rtmp://electroteque2.org/bwcheck'},
            {host:'rtmp://electroteque.org/bwcheck'}
        ]
    }

The configuration above is for clustering the bandwidth checking connections only. If you want to cluster your streaming connections, then you need to use our clustering plugin.

Download

Please right-click and choose "Save link as..." (or similar)

See the version history for this tool.

Found a bug?

If you encounter problems in this script, please send a bug report to the bug reporting forum. If you have a problematic page, including a direct URL to that page is by far the most effective way of helping us to find a bug.

Flowplayer Twitter feed