Bandwidth detection with pseudostreaming Streaming Extensions - Demo 1 / 13
Introduction
Here we demonstrate our bandwidth detection plugin. It detects the user's connection speed and serves the video accordingly. A faster speed means better video quality and larger file size. Click on the splash and you can see the calculated bandwidth below the video.
This example uses pseudostreaming and bitrate is also switched when the fullscreen mode is entered and when going back to normal mode from fullscreen.
HTML coding
Here we have the player container and the info box.
<a
href="bbb-800.mp4"
style="display:block;width:480px;height:300px;"
id="player">
<!-- splash image inside the container -->
<img src="/img/home/flow_eye.jpg" alt="Search engine friendly content" />
</a>Flowplayer configuration
We use flowplayer.bwcheck-3.2.5.swf plugin for the detection. It downloads a file from the internet and calculates the download speed based on this file download. This is not 100% accurate but gives us enough information for the bandwidth detection. If you need accurate results you should look for the next demo.
flowplayer("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.7.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://pseudo01.hddn.com/vod/demo.flowplayervod/',
provider: 'pseudostreaming'
},
plugins: {
// bandwidth check plugin
bwcheck: {
url: 'flowplayer.bwcheck-3.2.5.swf',
// this is the reference file that is download and used to calculate the bandwidth
netConnectionUrl: 'http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf',
// this method is called when the bandwidth check is done
onBwDone: function(info, bitrate) {
$f().getPlugin("content").setHtml(
"Awailable 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.7.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.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'
}
}
}
}
});You need to have different movie file for each bandwidth. This configuration uses following files
- bbb-800.mp4
- bbb-1200.mp4
- bbb-1600.mp4