RTMP Streaming with Flow Player

Written by admin on . Posted in RTMP Streaming

Basic RTMP connection with idevice fallback

Select the tabs to see the code

First, download FlowPlayer, like in the Progressive Download example.
Set up a container with your player id in the HTML:

<a id="player"></a>

You can style the container with css:

#player {
display: block;
width: 512px;
height: 288px;
margin: 0 auto;
}

Then reference your player id with the FlowPlayer javascript embed:

$f("player", "http://static.videoninja101.com/flowplayer/flowplayer-3.2.7.swf", {

    //this is where you will add plugins and clip objects

  })

Then  you want to get your connection and paths working with a basic rtmp connection to one video on your CDN. You actually have to download an RTMP plugin, believe it or not, and point to the .swf that you have uploaded to your CDN. Download the plugin. Then you will specify your rtmp connection.

  plugins: {
            rtmp: {
            url: "http://static.videoninja101.com/flowplayer/flowplayer.rtmp-3.2.3.swf",
            netConnectionUrl: 'rtmp://streaming.videoninja101.com/cfx/st'
        }
    },

After that, set up a clip object with a url property that will point to your video on the CDN. Then specify the type of provider as 'rtmp'. Add your basic clip options such as scaling and autoPlay.

clip: {
        url: "mp4:ed_512x288_750kbps3",
        provider: "rtmp",
        scaling: "fit",
        autoPlay: false
    }

Adding the iPad plugin

FlowPlayer has fallback for iDevices built in, however, you can add the iPad plugin to extend it's capability of using the full blown Javascript API. Also, The video plays embedded in the page. With the normal embedding method using flowplayer.js, it always plays fullscreen.

Upload the .js file to your server. Add a reference to that js file (flowplayer.ipad-3.2.2.min.js) to your page. Then, add the link to your iDevice compatible video in the clip options. Then, you have to make a call to the iPad function.
Here is the javascript from our example setup again:

$f("player", "http://static.videoninja101.com/flowplayer/flowplayer-3.2.7.swf", {
    plugins: {
       rtmp: {
       url: "http://static.videoninja101.com/flowplayer/flowplayer.rtmp-3.2.3.swf",
       netConnectionUrl: 'rtmp://streaming.videoninja101.com/cfx/st'
   }
},
clip: {
      url: "mp4:ed_512x288_750kbps3",
      provider: "rtmp",
      ipadUrl: "http://static.videoninja101.com/video/ed_mobile2.mp4",
      scaling: "fit",
      autoPlay: false
}
}).ipad();

Download the iPad plugin and see further documentation on FlowPlayer's website.

As far as offering other mobile support, I have not come across anything yet.

RTMP using Dynamic Streaming (bitrate switching)

Select the tabs to see the code

Please read the Video Compression and Encoding with Media Encoder articles for more tips on a compression strategy for RTMP streaming and bitrate switching.

This example expands on the basic RTMP example previously shown here. Now we will add a bitrates array to the clip object, download and implement the Bandwidth Check/Quality Monitor plugin, and add what is called a URLResolvers property to the clip object.

Implementing the Bandwidth Check plugin

Download the Bandwidth Check Plugin
Place this .swf on your server. Then add the bwcheck plugin in the plugins object next to the rtmp one we already established. Then specify the url to the plugin, your server type(available values are 'http', 'red5', 'wowza', and 'fms'). Then set dynamic to true to use dynamic switching. Add in your netConnectionUrl (rtmp connection).

plugins: {
         bwcheck: {
              url: 'http://static.videoninja101.com/flowplayer/flowplayer.bwcheck-3.2.5.swf', 

              // For Amazon
              serverType: 'fms',

              // we use dynamic switching, the appropriate bitrate is switched on the fly
              dynamic: true,

              netConnectionUrl: 'rtmp://streaming.videoninja101.com/cfx/st'
         },
        rtmp: {
            url: "http://static.videoninja101.com/flowplayer/flowplayer.rtmp-3.2.3.swf",
            netConnectionUrl: 'rtmp://streaming.videoninja101.com/cfx/st'
        }
    }

Adding the Bitrates Array to the clip object

Set your urls to the videos encoded at different dimensions and bitrates. Also set the width, height, and bitrate values. You can also specify a default bitrate. TIP: Notice how you have to prefix your .mp4 path with your video type, in this case mp4:

bitrates: [
         {
             url: "mp4:ed_512x288_750kbps2.mp4", width: 512, height: 288, bitrate: 750,
             // this is the default bitrate, the playback kicks off with this and after that
             // Quality Of Service monitoring adjusts to the most appropriate bitrate
             isDefault: true
         },
             { url: "mp4:ed_768x432_1250kbps.mp4", width: 768, bitrate: 1250 },
             { url: "mp4:ed_1024x576_2000kbps.mp4", width: 1024, bitrate: 2000 }
       ]

The urlResolvers Clip Object Property

The last step! FlowPlayer maintains on it's clip documentation page that you don't need the urlResolvers property because they are applied automatically, but... I could not get this example to work without it. I would recommend putting it in.

URL resolvers are used to resolve the final URL for the clip before it gets played.

urlResolvers: 'bwcheck'

Here is the entire javascript block again:

FlowPlayer documentation on Bitrate Switching

JWPlayer News

Read feed