You will recieve your password to this address. Address is not made public.

Your preferred username that is used when logging in.

Bandwidth detection with bitrates from a SMIL file Streaming Extensions - Demo 5 / 13

SMIL files and bitrate switching

This one shows bandwidth detection with a SMIL file. The bitrates are specified in a SMIL file and the SMIL plugin is used to parse it and pass the bitrate information over to the bandwidth detection plugin.

HTML coding

<a 
	href="bbb_480x270" 
    style="display:block;width:480px;height:270px"
	id="smilbw">	
</a>

Flowplayer configuration

The configuration uses the bwcheck plugin and the smil plugin. The content plugin is here just for demo purposes, to show the selected bitrate information. 

flowplayer("smilbw", "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf", {

    // The playlist is loaded from the RSS file
    clip: {
        url: "/demos/plugins/streaming/bitrates.smil.xml",
        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.2.swf'
        },
        
        // bandwidth check plugin
        bwcheck: {  
      	    url: 'flowplayer.bwcheck-3.2.5.swf', 
      	    
      	    // HDDN uses Wowza servers
      	    serverType: 'wowza',
      	    
      	    // we use dynamic switching, the appropriate bitrate is switched on the fly
      	    dynamic: true,
      	    
      	    netConnectionUrl: 'rtmp://rtmp01.hddn.com/play',
      	    			
            // 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.3.swf',
        	netConnectionUrl: 'rtmp://rtmp01.hddn.com/play'
        },
        
        // 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.0.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' 
                }  
            }  		
        }        
    }	

});

RSS file with bitrates

Here is the SMIL file used in the example above: 

<smil>
  <head>
    <meta base="rtmp://rtmp01.hddn.com/play" />
  </head>
  <body>
    <switch>
      <video src="mp4:vod/demo.flowplayervod/bbb-800.mp4" system-bitrate="800" width="480" />
      <video src="mp4:vod/demo.flowplayervod/bbb-1200.mp4" system-bitrate="1200" width="720" />
      <video src="mp4:vod/demo.flowplayervod/bbb-1600.mp4" system-bitrate="1600" width="1080" />
    </switch>
  </body>
</smil>

Take a look at a standalone version of this demo. View its source code to get things going on your page.