Live adaptive bitrate playback with Flow Player - it does not work

Hello,

I need live adaptive bitrate support wit flow player. So this is my setup:

  • siml file:
<?xml version="1.0" encoding="UTF-8"?>
<smil title="dynamic.smil">
	<body>
		<switch>
			<video height="480" src="myStream1" width="640">
				<param name="videoBitrate" value="500000" valuetype="data"></param>
			</video>
			<video height="240" src="myStream1" width="320">
				<param name="videoBitrate" value="100000" valuetype="data"></param>
			</video>
			<video height="120" src="myStream1" width="160">
				<param name="videoBitrate" value="50000" valuetype="data"></param>
			</video>
		</switch>
	</body>
</smil>

-fot test - it’s result from my browser - http://slive1:1935/live/smil:dynamic.smil/medialist.smil:

<smil><head/><body><switch><video src="mp4:myStream1" system-bitrate="500000" width="640" height="480"><param name="videoBitrate" value="500000" valuetype="data"/></video><video src="mp4:myStream1" system-bitrate="100000" width="320" height="240"><param name="videoBitrate" value="100000" valuetype="data"/></video><video src="mp4:myStream1" system-bitrate="50000" width="160" height="120"><param name="videoBitrate" value="50000" valuetype="data"/></video></switch></body></smil>

So it seems to be ok so far. Next, this is my flow player setup (the same as you desribed in your guide):

<html><head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	
	<title>Flowplayer RTMP and SMIL setup</title>
	</head><body>
	
	<script type="text/javascript" src="flowplayer-3.2.12.min.js"></script>
	<a
	href="bbb_480x270" 
	style="display:block;width:480px;height:270px"
	id="smilbw"> 
	</a>
	
	<script language="JavaScript" type="text/javascript">
	
// To avoid sandbox violation the .swf has to be on your website not flowplayers. 
	flowplayer("smilbw", "flowplayer-3.2.16.swf", {  
	
	// The playlist is loaded from the RSS file
	clip: {
	url: "http://slive1:1935/live/smil:dynamic.smil/medialist.smil",
	autoPlay: false,
	provider: 'rtmp',
	
	// use smil and bwcheck when resolving the clip URL
	urlResolvers: [ 'smil', 'bwcheck' ]
	},
	
	plugins: {
	
	// the SMIL plugin reads in and parses the SMIL, and provides
	// the bitrates info to the bw detection plugin
	smil: {
	url: 'flowplayer.smil-3.2.9.swf'
	},
	
	// bandwidth check plugin
	bwcheck: { 
	url: 'flowplayer.bwcheck-3.2.13.swf', 
	
	// HDDN uses Wowza servers
	serverType: 'wowza',
	
	// we use dynamic switching, the appropriate bitrate is switched on the fly
	dynamic: true,
	
	netConnectionUrl: 'rtmp://slive1/live',
	
	// 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);
	}
	},
	
	// RTMP streaming plugin
	rtmp: {
	url: 'flowplayer.rtmp-3.2.13.swf',
	netConnectionUrl: 'rtmp://slive1/live'
	},
	
	// 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' 
	} 
	} 
	} 
	} 
	
	});
	</script>
	
	</body></html>

And - finally, Flash Media Encoder setup (3 streams) - screenshot:http://i.imgur.com/XwS7FD5.png

What’s wrong:

  • Flow player displays only video - there is no bitrate information label - why?

  • I used NetLimiter to limit available bandwidth (for Chrome/Flash Plaer). I limited it to 10 kB/s. But still Flow Player chooses stream with max bitrate and of course it doesn’t work (to litlle bandwidth available). So live adaptive bitrate mechanism doesn’t work at all - always the best quality stream is chosen.

Do have any tips what am I missing?

Of course, my smil was wrong. I changed it to:

<?xml version="1.0" encoding="UTF-8"?>
<smil title="dynamic.smil">
	<body>
		<switch>
			<video height="480" src="myStream1" width="640">
				<param name="videoBitrate" value="500000" valuetype="data"></param>
			</video>
			<video height="240" src="myStream2" width="320">
				<param name="videoBitrate" value="100000" valuetype="data"></param>
			</video>
			<video height="120" src="myStream3" width="160">
				<param name="videoBitrate" value="50000" valuetype="data"></param>
			</video>
		</switch>
	</body>
</smil>

But still it doesn’t work. Flow Player doesn’t display any bitrate information and always choose best quality, even on slow connection. Any ideas?

Hi,

Do you have all the flowplayer.*.swf files referenced in your embed script available in your flowplayer folder from the webserver?

Can you check with “Firebug” if all the necessary .swf files are properly loaded by the browser?

Zoran

Hi there, make sure you are following the directions found here:

How to use Flowplayer with Wowza Media Server

ABR with Flowplayer

You can start Wowza in stand alone mode [install-dir]/bin/startup.bat (or startup.sh on Mac) and see if there is any indication to why it is not switching.

Salvadore

Hi.

I made everything as described in above tutotrials. Still flowplayer always choose worst quality stream, not matter what I do. Also, I tested jwPlayer with the same wowza config and following configuration for jwPlayer:

<html>
<head>
<script type='text/javascript' src='jwplayer.js'></script>
</head>
<body>
<div id='mediaplayer'></div>
<script type="text/javascript">
  jwplayer('mediaplayer').setup({
    'flashplayer': 'jwplayer.flash.swf',
    'id': 'playerID',
    'width': '720',
    'height': '306',
    'file': "http://slive1:1935/live/smil:dynamic.smil/jwplayer.smil",
	
  });
</script>
</body>
</html>

Results? First page load - jwPlayer chooses the best quality (always). Change stream via jwPlayer menu and again set it to auto - auto works. So jwPlayer is better but stll not everything works. I’m really confused, do you have any ideas?

Yes, all files used in html are present in the same directory. Also there no any error/messages in Firebug’s console. It’s strange, because I don’t know if I configured Wowza, or maybe Flow Player incorrectly. Or there is a bug in recent FlowPlayer?