Streaming plugin RTMP Streaming from Flash media servers using the RTMP protocol

Introduction

RTMP stands for "Real Time Messaging Protocol". It is a proprietary protocol developed by Adobe Systems for streaming audio, video and data over the Internet, between a Flash player and a server. The following RTMP servers are the most popular and they are all supported by this streaming plugin:

• Wowza Media Server
• Open Source Red5 server
• Adobe's Flash Media Server, FMS

Download (Version 3.1.3)

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

This example uses the RTMP streaming plugin to stream a video from Adobe Flash Media Interactive Server 3 hosted by Influxis. Try seeking to any part of the timeline.

<!-- setup player normally -->
<a class="player" id="fms">
	<img src="http://static.flowplayer.org/img/player/btn/showme.png"  />
</a>

$f("fms", "/swf/flowplayer-3.1.5.swf", {

	clip: {
		url: 'metacafe',
		// 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.1.3.swf',

			// netConnectionUrl defines where the streams are found
			netConnectionUrl: 'rtmp://cyzy7r959.rtmphost.com/flowplayer'
		}
	}
});

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

Configuration

Plugin configuration options:

Some configuration options are given in the clip object:

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" -->
<a class="player" id="streams">
	<img src="http://static.flowplayer.org/img/player/btn/showme.png"  />
</a>

$f("streams", "/swf/flowplayer-3.1.5.swf", {
	clip: {

		provider: 'influxis',

		// 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: {
		influxis: {
			url: 'flowplayer.rtmp-3.1.3.swf',
			netConnectionUrl: 'rtmp://cyzy7r959.rtmphost.com/flowplayer'
		}
	}
});

Multiple servers

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

$f("container3", "/swf/flowplayer-3.1.5.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.1.3.swf',
			netConnectionUrl: 'rtmp://flowplayer.org:1935/fastplay'
		}
	}
});

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", "/swf/flowplayer-3.1.5.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.1.3.swf',

			// netConnectionUrl defines where the streams are found
			netConnectionUrl: 'rtmp://cyzy7r959.rtmphost.com/flowplayer'
		}
	}
});

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.

<!-- setup player container  -->
<div id="audio" style="display:block;width:750px;height:30px;"
	href="mp3:fake_empire"></div>

JavaScript code

// install flowplayer into container
$f("audio", "/swf/flowplayer-3.1.5.swf", {
	plugins: {
		rtmp: {
			url: 'flowplayer.rtmp-3.1.3.swf',
		   	netConnectionUrl: 'rtmp://cyzy7r959.rtmphost.com/flowplayer',

		   	// make the rtmp plugin query the stream length from the server
		   	durationFunc: 'getStreamLength'
		},
		controls: {
			fullscreen: false,
			height: 30
		}
	},
	clip: {
		// it's possible to stream audio by using the RTMP plugin
		provider: 'rtmp',
		autoPlay: false
	}
});

The server-side stream length detection seems to be 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. Note that the server-side duration detection is not limited to audio clips, you can also use it with video.

Download

Get the latest version of Flowplayer RTMP streaming plugin. It is compatible with all 3.0+ releases.

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

See the version history for this tool.

NOTE We are no longer providing packed scripts. Althought they may have smaller file size they offer less performance than minified scripts. See details from JavaScript Library Loading Speed.

Found a bug?

If you encounter problems in this script, please send a bug report to the bug reporting forum. If you have a problematic page, including a direct URL to that page is by far the most effective way of helping us to find a bug.