This is a message.

Bandwidth detection

Switch bitrates based on available bandwidth

standalone demo

The bandwidth detection plugin is used for this purpose. It detects the user's connection speed and serves the video accordingly. A faster speed means better video quality and larger file size.

This example uses pseudo-streaming in conjunction with bitrate detection. The bitrate is checked at startup as well as when switching between normal and fullscreen mode, and the video files are selected accordingly.


<!-- splash image inside the container -->
<img src="/media/img/home/flow_eye.jpg"
alt="Search engine friendly content" />



To detect the bandwidth the plugin downloads a file specified in the netConnectionUrl property - we use the player binary flowplayer-3.2.18.swf here - and calculates the available bandwidth based on the download speed. This gives us a good enough approximation to select the bitrate and the corresponding video file. If you need accurate results you should take a look at the next demo which uses a true streaming protocol (RTMP) instead of pseudostreaming.

You need to have different files for each bitrate. This configuration uses the following files:

  • bbb-800.mp4
  • bbb-1200.mp4
  • bbb-1600.mp4

The javascript used for the above demo is shown below:

flowplayer("player", "", {
clip: {
// the bitrates, video width and file names for this clip
bitrates: [
{ url: "bbb-800.mp4", width: 480, bitrate: 800 },
{ url: "bbb-1200.mp4", width: 720, bitrate: 1200 },
{ url: "bbb-1600.mp4", width: 1080, bitrate: 1600 }
urlResolvers: 'bwcheck',
baseUrl: '',
provider: 'pseudostreaming'
log: {
filter: 'debug',
level: 'org.flowplayer.bwcheck.*'
plugins: {

// bandwidth check plugin
bwcheck: {
url: "flowplayer.bwcheck-3.2.13.swf",
checkOnStart: true,
// this is the reference file that is download and used to calculate
// the bandwidth
netConnectionUrl: "",
// this method is called when the bandwidth check is done
onBwDone: function(info, bitrate) {
"Available bandwidth: " +bitrate+ "<br />Video file served: bbb-" +
info.bitrate + ".mp4<br/>" +
"Video width: " + info.width);
// we use pseudostreaming which makes it possible to switch
// bitrates when the screen size changes when going fullscreen.
// You can also use bwcheck without pseudostreaming or RTMP
pseudostreaming: {
url: "flowplayer.pseudostreaming-3.2.13.swf"
controls: {
autoHide: false
// 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.9.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'