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.

HTML

<a
href="bbb-800.mp4"
style="display:block;width:480px;height:300px;"
id="player">
 
<!-- splash image inside the container -->
<img src="/media/img/home/flow_eye.jpg"
alt="Search engine friendly content" />
 
</a>

HTML

Configuration

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", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
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: 'http://p.demo.flowplayer.netdna-cdn.com/vod/demo.flowplayer/',
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: "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf",
 
// this method is called when the bandwidth check is done
onBwDone: function(info, bitrate) {
$f().getPlugin("content").setHtml(
"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'
}
}
}
}
 
});

JavaScript