LearningAPI » Dynamic Streaming in Flash

Dynamic Streaming in Flash – Bitrate Switching

By Larry B, March 14, 2010

These examples demonstrate Dynamic Streaming using Adobe Flash Media Server 3.5, delivery via RTMP. They accompany the article How to do Dynamic Streaming with Flash Media Server which appears on streamingmedia.com.

These players will continually detect your connection speed and select the most appropriate stream. The videos are H.264 MP4, keyframes every 2 seconds, at 1800, 1200, 800, 500, 256, and 96kbps, streamed RTMP from FMS 3.5. Information on testing changing bandwidth conditions can be found in my blog post, Testing Adaptive Streaming by Controlling Bandwidth. My testing methodology is described in the article on streamingmedia.com.

1080p Player - Reference Example

The implementation I used as a reference is the 1080p player, linked from Jens Loeffler's Flashstreamworks demo page. The 1080p player, playing the same test movies[opens in new window], performed well at dynamically switching during playback. The video versions are provided to the player in this SMIL playlist file.

JW FLV Player Example

In this example, I'm using the Longtail Video Quality Monitor plugin to display stream and bandwidth information on the player. If you have Firebug installed, you can see the player logging its activity in the Firebug console. Switching happens based on both bandwidth and screen size -- click on the full-screen button, and the stream will switch to a higher bitrate, larger version.

The dynamic streaming configuration for JW Player is handled in the playlist file

FlowPlayer Example

Dynamic Streaming in Flowplayer is configured in Javascript in the source code of the page.

<script>
   flowplayer("flowplayer", "flowplayer-3.1.5.swf", {
       log: { level: 'debug', filter: 'org.flowplayer.bwcheck.*, org.flowplayer.rtmp.*' },
       // configure our required plugins
       plugins:  {            
         // RTMP streaming plugin
         rtmp: {
             url: 'flowplayer.rtmp-3.1.3.swf',
             netConnectionUrl: 'rtmp://streaming.learningapi.com/cfx/st'
        },
        // bandwidth check plugin
        bwcheck: {  
            url: 'flowplayer.bwcheck-3.1.3.swf',
            serverType: 'fms',
            dynamic: true,
	    netConnectionUrl: 'rtmp://streaming.learningapi.com/cfx/st',
            bitrates: [64,384,768], 
            urlPattern: '{0}_{1}Kbps.mp4',                                               
            onBwDone: function(url, chosenBitrate, bitrate) { 
               var el = document.getElementById("info"); 
               el.innerHTML = "Your speed is: " +bitrate+ "<br />Video file: " +url; 
            },                     
            // called when stream is switched dynamically 
            onStreamSwitch: function(bitrate, newUrl, oldUrl) {
                var el = document.getElementById("info"); 
                el.innerHTML = "Switched to stream: " + newUrl + "<br />current bitrate: " + bitrate; 
            } 
          } 
        },
        clip: {  
            provider: 'rtmp',
            autoPlay: false,
            scaling: 'orig',        
            urlResolvers: 'bwcheck'
        }
    });          
</script>