This is a message.

HDS live streaming

Monitoring service quality for Adobe HTTP live streaming and on iOS

standalone demo

Important: This demo is not functional because we currently cannot offer a HLS and HDS live stream combination. Your live stream could be advertising your content here! If you are a live stream provider and would like to present a HLS stream and HDS stream combination to an even wider audience, please contact Flowplayer support.

This demo shows the integration of the HTTP Streaming plugin with the Bwcheck for HTTP streaming, f4m, and iPad plugins.

Observe how the quality of the live stream is constantly kept at the highest possible quality which the current bandwidth allows. Flowplayer has become your Web TV!

HTML

<div id="webtv" style="display:block;width:640px;height:360px;margin:0 auto;"></div>

HTML

Configuration

Both the Adobe F4M manifest and the HLS M3U8 file contain stream addresses in multiple bitrates. The Bwcheck for HTTP streaming plugin takes care of resolving the URLs according to currently available bitrate and the screen size. iOS has a similar builtin mechanism to process the M3U8 'playlist' which it is given via the ipadUrl property in the clip object.

Here's the complete configuration for this demo:

// install flowplayer into container
$f("webtv", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
clip: {
url: "manifest.f4m",
urlResolvers: ["f4m", "bwcheck"],
provider: "httpstreaming",
 
// base URL for manifest and media files
baseUrl: "http://notavailable.invalid/live",
 
// URL of M3U8 playlist for iOS
ipadUrl: "http://notavailable.invalid/playlist.m3u8",
 
scaling: "fit",
live: true
},
plugins: {
f4m: {
url: "flowplayer.f4m-3.2.10.swf"
},
httpstreaming: {
url: "flowplayer.httpstreaming-3.2.11.swf"
},
 
bwcheck: {
url: "flowplayer.bwcheck_httpstreaming-3.2.13.swf",
netConnectionUrl: "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf",
dynamic: true,
 
// bandwidth diagnostics - omitted in production
onStreamSwitchBegin: function (newItem, currentItem) {
this.getPlayer().getPlugin("content")
.setHtml("Will switch from " + currentItem.bitrate +
"kbps to " + newItem.bitrate + "kbps");
},
onStreamSwitch: function (newItem) {
this.getPlayer().getPlugin("content")
.setHtml("Switched to " + newItem.bitrate + "kbps");
}
},
 
// plugin to display bandwidth diagnostics, usually omitted in production
content: {
url: "flowplayer.content-3.2.9.swf",
backgroundColor: "#000000",
backgroundGradient: "none",
height: 26,
width: 275,
bottom: 2
},
// a bit of controlbar styling
controls: {
scrubber: false,
height: 30,
borderRadius: 30,
width: 290,
bottom: 30
}
}
}).ipad(); // sets up the player on iOS

JavaScript