This is a message.

Bitrate hints from F4M

Use multiple media elements to provide multi bitrate hints for Flowplayer

standalone demo

You can see it in action here.

HTML

<a id="bplayer" href="bbb_480x270"
style="display:block;width:660px;height:350px;">
 
</a>

HTML

Configuration

flowplayer("bplayer", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
clip: {
url: "/demos/standalone/plugins/streaming/bitrates-f4m.f4m",
autoPlay: false,
provider: 'rtmp',
 
// use f4m and bwcheck when resolving the clip URL
urlResolvers: [ 'f4m', 'bwcheck' ]
},
plugins: {
 
f4m: { url: "flowplayer.f4m-3.2.10.swf" },
bwcheck: {
url: "flowplayer.bwcheck-3.2.13.swf",
 
// we use dynamic switching, the appropriate bitrate is switched on the fly
dynamic: true,
// also check and select best bitrate on start
checkOnStart: true,
// exclude screen from quality of service monitoring
// so bitrate detection does not depend on screen size too
qos: {
screen: false
},
// server type needed for checkOnStart even with
// urlIncludesFMSApplicationInstance in the f4m
serverType: "fms",
 
// 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);
},
onBwDone: function(mappedItem, detectedBitrate) {
// needs checkOnStart
var content = $f().getPlugin('content');
var info = "Your speed is: " + detectedBitrate +
". Your chosen bitrate: " + mappedItem.bitrate +
". Video file served: " + mappedItem.url;
content.setHtml(info);
}
},
 
// RTMP streaming plugin
rtmp: {
url: "flowplayer.rtmp-3.2.13.swf"
},
 
// a content box so that we can see the selected bitrate. This is not normally
// used in real installations.
content: {
url: "flowplayer.content-3.2.9.swf",
top: 0,
left: 0,
width: 400,
height: 150,
backgroundColor: 'transparent',
backgroundGradient: 'none',
border: 0,
textDecoration: 'outline',
style: {
body: {
fontSize: 14,
fontFamily: 'Arial',
textAlign: 'center',
color: '#ffffff'
}
}
}
},
log: {
level: 'debug',
filter: 'org.flowplayer.f4m.*, org.flowplayer.rtmp.*, org.flowplayer.bwcheck.*'
}
 
});

JavaScript

F4M file with multiple media elements

Here is the F4M file used above:

<?xml version="1.0" encoding="UTF-8"?>
<manifest xmlns="http://ns.adobe.com/f4m/1.0">
<id>bbb</id>
<duration>653</duration>
<baseURL>rtmp://s3b78u0kbtx79q.cloudfront.net/cfx/st</baseURL>
<urlIncludesFMSApplicationInstance>true</urlIncludesFMSApplicationInstance>
<media url="mp4:bbb-800" bitrate="800" width="480"/>
<media url="mp4:bbb-1200" bitrate="1200" width="720"/>
<media url="mp4:bbb-1600" bitrate="1600" width="1080"/>
</manifest>

XML