This is a message.

Real Time Messaging Protocol with Flowplayer

RTMP is a protocol developed by Adobe Systems for streaming audio, video and data over the Internet, between a Flash player and a server.

The above example uses the RTMP streaming plugin to stream a video from an Wowza Media Server hosted by MaxCDN. Try seeking to any part of the timeline.

The following RTMP servers are the most popular and they are all supported by this streaming plugin:

Features

This plugin offers the following features:

  • Random seeking to any part of the timeline at any time.
  • Ability to combine a group of clips into one gapless stream.
  • Starting playback in the middle of the clip's timeline
  • Stopping before the clip file actually ends without downloading the whole file.
  • Playback of live streams.
  • Streaming MP3 audio with random seeking.

Example

<!-- widescreen container, 560x240 (clip dimensions) * 1.15, center splash -->
<div id="wowza" style="width:644px;height:276px;margin:0 auto;text-align:center">
<img src="/media/img/player/splash_black.jpg" height="276" width="548" />
</div>

HTML

$f("wowza", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
 
clip: {
url: 'mp4:vod/demo.flowplayer/buffalo_soldiers.mp4',
scaling: 'fit',
// configure clip to use hddn as our provider, referring to our rtmp plugin
provider: 'hddn'
},
 
// streaming plugins are configured under the plugins node
plugins: {
 
// here is our rtmp plugin configuration
hddn: {
url: "flowplayer.rtmp-3.2.13.swf",
 
// netConnectionUrl defines where the streams are found
netConnectionUrl: 'rtmp://r.demo.flowplayer.netdna-cdn.com/play'
}
},
canvas: {
backgroundGradient: 'none'
}
});

JavaScript

The standalone version of this example can be found here.

You should consult your server's documentation about how streaming servers are set up and what their specifications are. For example:

Adobe's Flash Media Server does not like the file extension in the clip's URL so you should not include it in the value. For example, just use url: 'example' even when the file is actually named 'example.flv'. For MP4 files the clip's URL must be prefixed with mp4:, i.e. url: 'mp4:example'.

Configuration

Plugin configuration options:

PropertyDefaultDescription

durationFunc

null

Name of function which queries the duration of the stream from the server. Usually only needed for MP3 audio streams delivered from an Adobe Flash Media server.

dvrSubscribeLive

false

For a live DVR stream, configure to start at the live portion of the DVR stream.

dvrSubscribeStart

false

For a live DVR stream, configure to start at the recorded portion of the DVR stream.

failOverDelay

250

The time in milliseconds until a RTMPT (rtmp tunneled through http) connection is tried when connecting via rtmp fails because for instance the default rtmp port is blocked.

inBufferSeek

true

Set this to false if you are communicating to a RTMP server which does not support seeking inside the buffer, aka 'smart seeking'. Smart seeking was introduced in Adobe Flash Media Server 3.5.3.

netConnectionUrl

null

The RTMP URL used to connect to the server app. This is optional and you can also specify this in the clip, so that the different clips in the playlist point to different servers.

objectEncoding

3

The object encoding used with the streaming server. Change this to a value of 0 if you need to communicate to servers released prior to Flash Player 9 (Adobe Flash Media Server 2).

proxyType

best

The proxyType determines which fallback methods are tried if an initial connection attempt to the server fails. Flowplayer establishes the connection by doing parallel connection attempts using RTMP and RTMPT. The one that succeeds first is used and the other one is discarded - this way the connection is established as fast as possible in firewalled and proxied network environments.

subscribe

false

Set to true to make the plugin 'subscribe' to the stream. Needed for RTMP live streams from Akamai, Limelight and other CDNs which may require the FCSubscribe command.

Some configuration options are given in the clip object:

Clip PropertyDefaultDescription

connectionArgs

null

An array of arguments to be passed to NetConnection.connect(). Some CDN networks require custom values to be passed here. You can also use this to pass data to your application running in the RTMP server. For example, you can use connectionArgs: [false, "foobar"] and this will result in NetConnection.connect(netConnectionUrl, false, "foobar") being called.

netConnectionUrl

null

The RTMP URL used to connect to the server app. Required if not specified in the plugin.

rtmpSubscribe

false

Set to true to make the rtmp plugin 'subscribe' to the stream. Needed for RTMP live streams from Akamai, Limelight and other CDNs which may require the FCSubscribe command.

url

null

The name of the stream. For H.264 encoded files, use the following format: mp4:stream.mp4. For audio files use mp3:audio.mp3. NOTE: With Adobe's Flash Communication Server the stream name does not include the file extension, for example: mp3:audio, or mystream

Combining streams

Our next example combines two video files into one stream. We alternate between two videos playing 10 seconds at a time from each before switching to the other video. Every time we switch back to a video it resumes from the same time it was previously stopped at. There are no gaps when the stream switches, it comes as one continuous bitstream from the server. Flowplayer's controlbar shows the two streams in one timeline corresponding to their total duration.

<!-- our player container named "streams" -->
<!-- player container-->
<a class="player"
style="display:block;width:425px;height:300px;margin:10px auto"
id="streams">
</a>

HTML
$f("streams", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
clip: {
 
provider: 'cloudfront',
 
// combined streams are configured in the "streams" node as follows:
streams: [
{ url: 'metacafe', duration: 10 },
{ url: 'honda_accord', start: 2, duration: 10 },
{ url: 'metacafe', start: 10, duration: 10 },
{ url: 'honda_accord', start: 10, duration: 10 },
{ url: 'metacafe', start: 20, duration: 10 },
{ url: 'honda_accord', start: 20, duration: 10 },
{ url: 'metacafe', start: 30, duration: 10 },
{ url: 'honda_accord', start: 30, duration: 10 }
]
},
 
// our rtmp plugin is configured identically as in the first example
plugins: {
cloudfront: {
url: "flowplayer.rtmp-3.2.13.swf",
netConnectionUrl: 'rtmp://s3b78u0kbtx79q.cloudfront.net/cfx/st'
}
}
});

JavaScript

The standalone version of this example can be found here.

Multiple servers

You can have clips in the playlist coming from several RTMP servers.

$f("container3", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
 
// common configuration for each clip
clip: {
 
// each clip uses the rtmp provider
provider: 'rtmp'
},
 
// here is our playlist
playlist: [
'mp4:video1.mp4',
'mp4:video2.mp4',
 
{
// third clip uses a different RTMP server
netConnectionUrl: 'rtmp://red5hosting.com/vodapp',
url:'Extremists.flv'
}
],
 
plugins: {
rtmp: {
url: "flowplayer.rtmp-3.2.13.swf",
netConnectionUrl: 'rtmp://flowplayer.org:1935/fastplay'
}
}
});

JavaScript

If the netConnectionUrl is given in the clip it overrides the value given in the plugin. In the example above, the first two clips come from the server listening at rtmp://beta.flowplayer.org:1935/fastplay, and the third clip comes from the clip specific server listening at rtmp://red5hosting.com/vodapp.

Live streams

You can use this plugin to view live streams. The configuration is almost the same; however, the clip URLs now specify the live stream names. These names are assigned when the stream is published to the server. To publish your own stream you will need a webcam and for example Adobe's Flash Media Live Encoder to encode the stream and send it to the server. To see what this does in action, take a look at justin.tv. To enable live streaming, add the live property to the clip to designate that the clip is indeed a live feed:

$f("live", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
 
clip: {
url: 'my_lifecast',
live: true,
// configure clip to use influxis as our provider, it uses our rtmp plugin
provider: 'influxis'
},
 
// streaming plugins are configured under the plugins node
plugins: {
 
// here is our rtpm plugin configuration
influxis: {
url: "flowplayer.rtmp-3.2.13.swf",
 
// netConnectionUrl defines where the streams are found
netConnectionUrl: 'rtmp://cyzy7r959.rtmphost.com/flowplayer'
}
}
});

JavaScript

Streaming MP3 audio (with server-side stream length detection)

The plugin can query stream lengths from the RTMP server as described in this Adobe document. This is enabled by configuring the name of the server-side function that returns the stream length. As with video clips RTMP powered audio allows random seeking in the timeline and also random start positions.

Important! Audio files deployed via RTMP must be encoded at a constant bitrate (CBR). The duration of audio files is calculated from the bitrate, therefore a file encoded at variable bitrate (VBR) will lead to haphazard results.

<!-- set up player container  -->
<a id="audio" style="display:block;width:708px;height:30px;"
href="mp3:fake_empire-cbr"></a>

HTML
// install flowplayer into container
$f("audio", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
plugins: {
rtmp: {
url: "flowplayer.rtmp-3.2.13.swf",
netConnectionUrl: 'rtmp://s3b78u0kbtx79q.cloudfront.net/cfx/st',
 
// make the rtmp plugin query the stream length from the server
durationFunc: 'getStreamLength'
},
controls: {
fullscreen: false,
height: 30,
autoHide: false
}
},
// we don't see the video screen's play button, so don't load it
play: null,
clip: {
// it's possible to stream audio by using the RTMP plugin
provider: 'rtmp',
autoPlay: false
}
});

JavaScript

The server-side stream length detection is only necessary with Adobe FMS. Red5 and Wowza don't need this as they seem to inject the duration metadata into the file when the streaming begins.

The standalone version of this example can be found here.

Note: Streaming audio via RTMP is done without the audio plugin. Therefore the coverImage clip property which is specifically provided by the audio plugin is not available.

Events and MP3 metadata

As with all clips, you can set up event listeners for your MP3 files. For example, you can trigger your custom events when the music starts, stops, pauses and resumes. If your MP3 is ID3 tagged, you can gain access to the id3-tags' data via the metaData object in the onMetaData event and all subsequient clip events. Here is an example:

clip: {
onMetaData: function(song) {
alert("Now playing: " + song.metaData.TIT2);
}
}

JavaScript

Note: Exclusively ID3 version 2.3 tags and higher are supported. Meta information from MP3 files carrying ID3v1 tags, ID3v2.2 (obsolete) or both ID3v1 and ID3v2 tags cannot be retrieved.

Typical properties in the metaData object include:

PropertyDescriptionExample

TALB

Album name

Boxer

TCON

Music category

Indie

TENC

Encoding

Exact Audio Copy (Secure mode)

TIT2

Song title

Fake Empire

TPE1

Artist

The National

TRCK

Track number

1

TYER

Album year

2007

Alternatively the following full tag names are also available: album, songtitle, artist, track, year.

Download

flowplayer.rtmp-3.2.13.swf

just the working flash file to get you going

flowplayer.rtmp-3.2.13.zip

working flash file (swf) + README.txt and LICENSE.txt

flowplayer.rtmp-3.2.13-src.zip

source code

Please right-click and choose "Save link as..." (or similar)

Note: For XSS security reasons Flash plugins must be located at and loaded from the same domain as the core player flowplayer-3.2.18.swf.

This is a Flash plugin, and its features are therefore not available on iOS. For iOS please consult the ipad plugin.

See the version history for this tool.

Found a bug?

If you encounter problems with this script, please turn to the Flowplayer Flash plugin forum with a link to a minimal sample page (no extra html, css, javascript) demonstrating the issue.