Forum, Support | Wowza Media Systems - Using FlowPlayer with Wowza Media Server

This article describes how to use Flowplayer (http://flowplayer.org) with Wowza Media Server^®.

Note: For Wowza Media Server 3.x.

Basic setup
Video on demand playback example
Live playback example
nDVR playback example
How to playback content in a folder inside of the [install-dir]/content folder
Live adaptive bitrate playback with SMIL file example
Flash security restriction

Basic setup

Download and install Wowza Media Server.
Download FlowPlayer Flash and extract the contents from the downloaded compressed (zipped) file.
Download the RTMP Streaming Plugin .swf and copy it to the unzipped Flowplayer folder. (Be sure to copy it to the inner flowplayer folder that contains the flowplayer-3.x.x.swf file.)

Video on demand playback example

In this example, an application named vod is used to stream pre-recorded video content from the [install-dir]/content folder. The vod application is installed and configured as part of the Wowza Media Server installation.

Edit the flowplayer/example/index.html file in the root directory of the zipped archive, and make the following changes to the <script> section:

Note: Change "x.x" in the Flowplayer filename for the current version of Flowplayer and in the RTMP Streaming Plugin filename for the current version of the plugin.

From:
Code:
```
<script>
	flowplayer("player", "../flowplayer-3.x.x.swf");
</script>
```
To:
Code:
```
<script type="text/javascript">
	flowplayer("player", "../flowplayer-3.x.x.swf",
		{
			clip: {
				url: 'mp4:sample.mp4',
				provider: 'rtmp'
			},
			plugins: {
				rtmp: {
				url: '../flowplayer.rtmp-3.x.x.swf',
				netConnectionUrl: 'rtmp://[wowza-ip-address]/vod'
				}
			}
		}
	);
</script>
```
where:
- [wowza-ip-address] is the IP address of your server running Wowza Media Server.
- vod is the name of the Wowza Media Server application.
- mp4:sample.mp4 is the name of the sample video that ships with Wowza Media Server.
To playback, copy the flowplayer folder to a web server and open the following URL in a browser:
Code:
```
http://[webserver-address]/flowplayer/example/index.html
```

Live playback example

Set up an application for live streaming by following one of our live streaming tutorials.
Edit the flowplayer/example/index.html in the root directory of the zipped archive, and make the following changes to the <script> section:

Note: Change "x.x" in the player filename for the current version of Flowplayer and in the RTMP Streaming Plugin filename for the current version of the plugin.

Note: Set live: true, in the clip section.

From:
Code:
```
<script>
	flowplayer("player", "../flowplayer-3.x.x.swf");
</script>
```
To:
Code:
```
<script type="text/javascript">
	flowplayer("player", "../flowplayer-3.x.x.swf",
		{
			clip: {
				url: 'myStream',
				live: true,
				provider: 'rtmp'
			},
			plugins: {
				rtmp: {
				url: '../flowplayer.rtmp-3.x.x.swf',
				netConnectionUrl: 'rtmp://[wowza-ip-address]/live'
				}
			}
		}
	);
</script>
```
where:
- [wowza-ip-address] is the IP address of your server running Wowza Media Server.
- live is the name of the Wowza Media Server application.
- myStream is the stream name of the live stream.

How to playback content in a folder inside of the [install-dir]/content folder

To play H.264 or MP3 content that is in a folder inside of the [install-dir]/content folder, prepend mp4: and mp3: respectively to the folder name. For example, to play the media file:

Code:

[install-dir]/content/myvideos/sample.mp4

The flowplayer/example/index.html snippet would look like:

Code:

<script type="text/javascript">
	flowplayer("player", "../flowplayer-3.x.x.swf",
		{
			clip: {
				url: 'mp4:myvideos/sample.mp4',
				provider: 'rtmp'
			},
			plugins: {
				rtmp: {
				url: '../flowplayer.rtmp-3.x.x.swf',
				netConnectionUrl: 'rtmp://[wowza-ip-address]/vod'
				}
			}
		}
	);
</script>

[install-dir]
Windows (default): C:\Program Files\Wowza Media Systems\Wowza Media Server [version]
Mac OS X: /Library/WowzaMediaServer
Linux: /usr/local/WowzaMediaServer

Live adaptive bitrate playback with SMIL file example

This section describes a more advanced live streaming example that uses multiple Flowplayer plugins and works for single bitrate RTMP streaming and adaptive bitrate streaming using a SMIL file.

For testing adaptive bitrate streaming, overlay text will alert you to a switch to a different bitrate stream by displaying text such as: Switched to: mp4:Live1

Follow the instructions in Instructions for basic setup.
Download SMIL plugin .swf file and copy into the unzipped FlowPlayer folder (inside the inner flowplayer folder that contains flowplayer-3.x.x.swf).
Download Content plugin .swf file and copy into the unzipped FlowPlayer folder (inside the inner flowplayer folder that contains flowplayer-3.x.x.swf).
Download bandwidth detection plugin .swf file and copy into the unzipped FlowPlayer folder (inside the inner flowplayer folder that contains flowplayer-3.x.x.swf).

Create a SMIL file and copy to [install-dir]/content.
This example uses a SMIL file named live-smil.smil

Code:

<smil>
    <head>
    </head>
    <body>
        <switch>
            <video src="live1" system-bitrate="700000"/>
            <video src="live2" system-bitrate="500000"/>
            <video src="live3" system-bitrate="350000"/>
        </switch>
    </body>
</smil>

Edit the flowplayer/example/index.html in root directory of the zip archive.
The following example player code for live adaptive bitrate streaming uses live-smil.smil. Replace [wowza-ip-address] with the IP address of your Wowza Media Server.

Code:

	<html><head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	
	<title>Flowplayer RTMP and SMIL setup</title>
	</head><body>
	
	<script type="text/javascript" src="flowplayer-3.2.6.min.js"></script>

	<a
	href="bbb_480x270" 

	style="display:block;width:480px;height:270px"
	id="smilbw"> 
	</a>
	
	<script language="JavaScript" type="text/javascript">
	
// To avoid sandbox violation the .swf has to be on your website not flowplayers. 
	flowplayer("smilbw", "flowplayer-3.2.7.swf", {  
	
	// The playlist is loaded from the RSS file
	clip: {
	url: "http://[wowza-ip-address]:1935/live/smil:live-smil.smil/medialist.smil ",

	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://[wowza-ip-address]/live',
	
	// 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://[wowza-ip-address]/live'
	},
	
	// 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' 
	} 
	} 
	} 
	} 
	
	});
	</script>
	
	</body></html>

Copy the flowplayer folder to a web server and open in a browser:
Code:
```
http://[webserver-address]/flowplayer/example/index.html
```
where:
[wowza-ip-address]: is the IP address of your server running Wowza Media Server.
live: is the name of the Wowza Media Server application.
live-smil.smil: is the name of the SMIL file located in [install-dir]/content.

nDVR Playback

This configuration shows how to play Wowza nDVR streams. This is the basic guide for configuring Wowza nDVR. See this Flowplayer page for reference.

Code:

<html>
  <head>
    <script src="flowplayer-3.2.11.min.js"></script>
  </head>
  <body>
  	<h1>Flowplayer Wowza nDVR playback</h1>
    <div id="httpstreaming-dvr" style="display:block;width:425px;height:300px;"></div>
    <script>
		flowplayer("httpstreaming-dvr", "http://releases.flowplayer.org/swf/flowplayer-3.2.15.swf", {
   		plugins: {
        	f4m: {
           	 url: "http://releases.flowplayer.org/swf/flowplayer.f4m-3.2.9.swf",
           	 dvrBufferTime: 5,
           	 liveBufferTime: 5
        	},
       	 	httpstreaming: {
            	url: "http://releases.flowplayer.org/swf/flowplayer.httpstreaming-3.2.9.swf"
        	}
    	},
    	clip: {
      	  	url: "http://[wowza-address]:1935/dvr/Stream1/manifest.f4m?DVR",
       	 	urlResolvers: ['f4m'],
       	 	provider: 'httpstreaming',
        	autoPlay: false
    	}
	});
    </script>
  </body>
</html>

Flash security restriction

Due to a security restriction in Flash, you must host the Flowplayer files on your web server. The easiest solution is to copy all of the files inside of the flowplayer folder (including sub-folders) to your web server. To play, open a web browser and enter the url for the index.html file.

If you want to play the video locally without hosting the file at your a web server, use the following instructions to add the flowplayer-3.x.x.swf, flowplayer.controls-3.x.x.swf, and flowplayer.rtmp-3.x.x.swf files to your list of trusted SWF files.

Right click on the flash movie below the title single file, with preview image, and then select Settings from the popup menu.
Click the Advanced button. A browser window will be displayed.
Click the Global Security Settings Panel link. A new webpage will open with a Flash swf file in the upper-right corner.
In this Flash movie, select Add location from the Edit locations popup.
Click Browse for files, find and select flowplayer-3.x.x.swf, and then click Open. Do this for each of the three files.
To play, close all open web browsers windows and double-click flowplayer/examples/index.html.

Click here, if you are having problems or would like to discuss this article.
Leave a comment below, if there is some aspect of this article you would like to see changed or improved.

28 Comments

TechSupport - 06-22-2011, 09:21 AM
- Reply
"6. Due to a security restriction in Flash, it is necessary to host the FlowPlayer files at your web server." - it is not true for now.
Tested with Flowplayer version 3.2.7, flowplayer.rtmp-3.2.3.swf, flowplayer.controls-3.2.5.swf,- all files at the remote http,- works fine.

rrlanham - 06-22-2011, 03:14 PM
- Reply
I think any web server is good, this message has to do with running from file explorer. The Wowza examples will run from the file explorer.

Richard

bartvels - 08-15-2011, 07:06 AM
- Reply
Using a default (!) Wowza installation and the solution above opens a browser window with a nice rotating circle as if it is loading my mp4 file which is located in the [Wowza Media Server 2.2.4\content] folder.

I think is has to do something with this line:
Code:

netConnectionUrl: 'rtmp://[wowza-address]/simplevideostreaming'
What could be wrong?

rrlanham - 08-15-2011, 07:13 AM
- Reply
Is Wowza running as a service? If so, stop the service and run in stand-alone mode (/bin/startup.bat) so you can see log output in real time. Watch the console when you try to connect. The same info is in the access log, but it's very very helpful to see in real time.

Instead of Flowplayer, for testing purposes, first try the Wowza example player, /examples/SimpleVideoStream/client/simplevideostreaming.html

Richard

bartvels - 08-16-2011, 12:19 AM
- Reply
Hi,
On the console I did get the following error:
Code:

WARN server comment - Application folder ([install-location]/applications/simplevideostreaming) is missing
and on the player I did see:
Code:

201, Unable to load stream or clip file, connection failed, clip: '[Clip] 'mp4:ontwerpen_van_bloemwerk.mp4''
Solution:
Create the folder "simplevideostreaming" in the [./applications] folder and restart the Wowza server.

rrlanham - 08-16-2011, 03:35 AM
- Reply
Just create that folder: install-location]/applications/simplevideostreaming

More info:
http://www.wowza.com/forums/content.php?217#appConfig

Richard

koobos - 11-16-2011, 10:47 AM
- Reply
Greetings! This worked really well for me and streaming a live video feed. When I checked the feed on my Andriod it didn't play. I didn't get any errors, but no video. Wondering if this should work on the driod, or if something has to be done to the code to make it work. Anyone know? Thanks in advance!

rrlanham - 11-16-2011, 12:19 PM
- Reply
If the audio track is mp3, that might be the reason. AAC is required on Android

Richard

koobos - 11-16-2011, 02:45 PM
- Reply
Thanks Richard. No audio in the stream. I will try again tonight. If the stream has not been started on the server, I got an error message when loading it in Flowplayer. If the stream is started, I just get a black screen, no error.

rrlanham - 11-16-2011, 02:56 PM
- Reply
Try a very lower bitrate, Baseline 3, and small frame size.

Richard

cnfcnf - 12-13-2011, 07:07 AM
- Reply
Can this be updated for use with the nDVR?

rrlanham - 12-13-2011, 07:20 AM
- Reply
As mentioned in other thread, no Flowplayer doesn't work with nDVR. You need OSMF player like Strobe

Richard

BarrySDCA - 12-31-2011, 12:19 PM
- Reply
can someone post an update to this thread please? I can't pull up the example any longer.

trying to use flowplayer with wowza, rtmp, smil, and dyamic streaming which I understand they now support.

thank you

randall - 12-31-2011, 01:28 PM
- Reply
Barry,

They're moving everything over to "wowza.com" from "wowzamedia.com". Try this: http://www.wowza.com/forums/content....h-Wowza-Server

GriselZolondek - 06-27-2012, 10:48 PM
- Reply
Originally Posted by BarrySDCA

can someone post an update to this thread please? I can't pull up the example any longer.

trying to use flowplayer with wowza, rtmp, smil, and dyamic streaming which I understand they now support.

thank you

you are going to setup an application named

del-mt - 10-10-2012, 08:41 AM
- Reply
Can update that for use too in flowplayer 5?

rrlanham - 10-10-2012, 08:57 AM
- Reply
I don't know what you are referring to

Richard

del-mt - 10-10-2012, 01:38 PM
- Reply
I am referring to the new version of flowplayer 5.0.0 with html5. This tutorial referrs to Flowplayer 3.x...

fmblanco - 10-22-2012, 05:59 PM
- Reply
Originally Posted by del-mt

I am referring to the new version of flowplayer 5.0.0 with html5. This tutorial referrs to Flowplayer 3.x...

dont work in ver 5.0

you can download verion 3.x for work

fmblanco - 10-22-2012, 06:07 PM
- Reply
for me
only work if you change
Code:

http://[wowza-ip-address]:1935/live/smil:live-smil.smil/medialist.smill
for

live-smil.smil.xml

save this file in your webserver . save with name live-smil.smil.xml

<smil>
<head>
<meta base="rtmp://[wowza-ip-address]:1935/live"/>
</head>
<body>
<switch>
<video src="live-smil_1" system-bitrate="350" width="320"/>
<video src="live-smil_2" system-bitrate="200" width="320"/>
<video src="live-smil_3" system-bitrate="100" width="320"/>
</switch>
</body>
</smil>

How to use Flowplayer with Wowza Media Server

Contents

Basic setup

Video on demand playback example

Live playback example

How to playback content in a folder inside of the [install-dir]/content folder

Live adaptive bitrate playback with SMIL file example

nDVR Playback

Flash security restriction

Wowza Media

Article List

Categories