Use Flowplayer with Wowza Streaming Engine

This article describes how to use the Flowplayer HTML5 player (with Flash fallback) with Wowza Streaming Engine™ media server software.

Important: The script examples in this article require the use of Flowplayer plug-ins. When using the examples, be sure to replace the .swf file versions with the correct version of the Flowplayer plug-ins.

Contents


Get Flowplayer
Video-on-demand playback example
Live playback example
Adobe HTTP streaming playback example
Wowza nDVR playback example
Play content in a folder inside of the [install-dir]/content folder
Live adaptive-bitrate playback with SMIL file example
Video-on-demand adaptive-bitrate playback with SMIL file example
Flash security restriction
More resources

Get Flowplayer


  1. Download the FlowPlayer Flash zip file and extract the contents from the downloaded file.
  2. Download the Flowplayer RTMP Streaming plugin .swf binary file 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 recorded video content from the Wowza Streaming Engine [install-dir]/content folder. The vod application is installed and configured as part of the Wowza Streaming Engine installation.
 
  1. 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 file name for the current version of Flowplayer and in the Flowplayer RTMP Streaming plugin file name for the current version of the plugin.
    From:
    <script>
    	flowplayer("player", "../flowplayer-3.x.x.swf");
    </script>
    To:
    <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 Wowza Streaming Engine server.
       
    • vod is the name of the Wowza Streaming Engine application.
       
    • mp4:sample.mp4 is the name of the sample video that's included with Wowza Streaming Engine.
  2. To play, copy the flowplayer folder to a web server, and then open the following URL in a browser:
    http://[webserver-address]/flowplayer/example/index.html

Live playback example


  1. Set up an application for live streaming in Wowza Streaming Engine Manager.
     
  2. Edit the flowplayer/example/index.html in the root directory of the zipped archive, and make the following changes to the <script> section:
     
    Notes:
    • Change "x.x" in the player file name for the current version of Flowplayer and in the Flowplayer RTMP Streaming plugin file name for the current version of the plugin.
       
    • Set live: true, in the clip section.
    From:
    <script>
    	flowplayer("player", "../flowplayer-3.x.x.swf");
    </script>
    To:
    <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 Wowza Streaming Engine server.
       
    • live is the name of the Wowza Streaming Engine application.
       
    • myStream is the stream name of the live stream.

Adobe HTTP playback example


To play an Adobe HDS stream, download the Flowplayer Adobe HTTP Streaming plugin, which requires the Flowplayer F4M plugin to resolve the streams from the F4M manifest file.

<html>
  <head>
    <script type="text/javascript" src="http://releases.flowplayer.org/js/flowplayer-3.x.x.min.js"/>
  </head>
  <body>
  	<h1>Flowplayer Wowza HTTP playback</h1>
    <div id="httpstreaming" style="display:block;width:425px;height:300px;"></div>
    <script>
		flowplayer("httpstreaming", "http://releases.flowplayer.org/swf/flowplayer-3.x.x.swf", {
   		plugins: {
        	f4m: {
           	 url: "http://releases.flowplayer.org/swf/flowplayer.f4m-3.x.x.swf",
           	 dvrBufferTime: 5,
           	 liveBufferTime: 5
        	},
       	 	httpstreaming: {
            	url: "http://releases.flowplayer.org/swf/flowplayer.httpstreaming-3.x.x.swf"
        	}
    	},
    	clip: {
      	  	url: "http://[wowza-address]:1935/live/myStream/manifest.f4m",
       	 	urlResolvers: ['f4m'],
       	 	provider: 'httpstreaming',
        	autoPlay: false
    	}
	});
    </script>
  </body>
</html>
Where:
 
  • [wowza-ip-address]: is the IP address of your Wowza Streaming Engine server.
     
  • live: is the name of the Wowza Streaming Engine application.
     
  • myStream: is the name of the live stream.

Wowza nDVR playback example


This configuration shows how to play nDVR streams. See Set up and run Wowza nDVR in Wowza Streaming Engine for instructions on configuring Wowza nDVR. See the Flowplayer Adobe HTTP Streaming plugin webpage for reference.

<html>
  <head>
    <script src="../flowplayer-3.x.x.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.x.x.swf", {
   		plugins: {
        	f4m: {
           	 url: "http://releases.flowplayer.org/swf/flowplayer.f4m-3.x.x.swf",
           	 dvrBufferTime: 5,
           	 liveBufferTime: 5
        	},
       	 	httpstreaming: {
            	url: "http://releases.flowplayer.org/swf/flowplayer.httpstreaming-3.x.x.swf"
        	}
    	},
    	clip: {
      	  	url: "http://[wowza-address]:1935/dvr/Stream1/manifest.f4m?DVR",
       	 	urlResolvers: ['f4m'],
       	 	provider: 'httpstreaming',
        	autoPlay: false
    	}
	});
    </script>
  </body>
</html>

Pay content in a folder inside of the [install-dir]/content folder


To play H.264 or MP3 content that's 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:

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

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

<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 (x86)\Wowza Media Systems\Wowza Streaming Engine [version]
     
  • OS X – /Library/WowzaStreamingEngine
     
  • Linux – /usr/local/WowzaStreamingEngine

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 for adaptive-bitrate (ABR) streaming that uses a SMIL file. The SMIL file contains the names and descriptions of variable bitrate streams used in ABR streaming.

Adaptive-bitrate streaming of live content to Flowplayer Flash requires that you have an encoder that can generate multiple bitrate streams from the same source with properly aligned keyframes. For stream-switching to occur properly, the keyframes of each of the files must be aligned with each other. This must be done at encoding time and can be achieved by setting the keyframe interval and frame rate values to be the same for each encoded bitrate.
 
  1. Get Flowerplayer.
     
  2. Download the Flowplayer SMIL plugin .swf binary file and copy it to the unzipped Flowplayer folder (inside the inner flowplayer folder that contains flowplayer-3.x.x.swf).
     
  3. Download the Flowplayer Content plugin .swf binary file and copy it to the unzipped Flowplayer folder (inside the inner flowplayer folder that contains flowplayer-3.x.x.swf).
     
  4. Download the Flowplayer Bandwidth detection plugin .swf binary file and copy it to the unzipped Flowplayer folder (inside the inner flowplayer folder that contains flowplayer-3.x.x.swf).
     
  5. Create a SMIL file and copy it to the Wowza Streaming Engine [install-dir]/content folder. This example uses a SMIL file named live-smil.smil.
    <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>
  6. Edit the flowplayer/example/index.html in the 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 Streaming Engine server.
    <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.x.x.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.x.x.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.9.swf'
    	},
    
    	// bandwidth check plugin
    	bwcheck: {
    	url: 'flowplayer.bwcheck-3.2.13.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.13.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.9.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>
  7. Copy the Flowplayer folder to a web server, and then open this folder in a browser:
    http://[webserver-address]/flowplayer/example/index.html
    Where:
     
    • [wowza-ip-address]: is the IP address of your Wowza Streaming Engine server.
       
    • live: is the name of the Wowza Streaming Engine application.
       
    • live-smil.smil: is the name of the SMIL file located in [install-dir]/content
Note: For testing adaptive bitrate streaming, overlay text alerts you to a switch to a different bitrate stream by displaying text such as: Switched to: mp4:bigbuckbunny_450.mp4.

Video-on-demand adaptive-bitrate playback with SMIL file example


This section describes a more advanced on-demand streaming example that uses multiple Flowplayer plugins and works for single bitrate RTMP streaming and for ABR streaming that uses a SMIL file. The SMIL file contains the names and descriptions of variable bitrate streams used in ABR streaming.

Adaptive-bitrate streaming of on-demand content to Flowplayer Flash requires that you have multiple files that are pre-encoded to the desired bitrates for streaming. For stream-switching to occur properly, the keyframes of each of the files must be aligned with each other. This must be done at encoding time and can be achieved by setting the keyframe interval and frame rate values to be the same for each encoded file. After the files are properly encoded, copy them to the Wowza Streaming Engine [install-dir]/content folder.
 
Note: The steps in this section create a SMIL file named vod-smil.smil to support the following files that you can download from our website for testing purposes. This set of files was encoded with aligned keyframes to enable adaptive bitrate streaming.
 
H.264 Main profile
bigbuckbunny_450.mp4 (450kbps total bitrate)
bigbuckbunny_750.mp4 (750kbps total bitrate)
bigbuckbunny_1100.mp4 (1100kbps total bitrate)
  1. Get Flowerplayer.
     
  2. Download the Flowplayer SMIL plugin .swf binary file and copy it to the unzipped Flowplayer folder (inside the inner flowplayer folder that contains flowplayer-3.x.x.swf).
     
  3. Download the Flowplayer Content plugin .swf binary file and copy it to the unzipped Flowplayer folder (inside the inner flowplayer folder that contains flowplayer-3.x.x.swf).
     
  4. Download the Flowplayer Bandwidth detection plugin .swf binary file and copy it to the unzipped Flowplayer folder (inside the inner flowplayer folder that contains flowplayer-3.x.x.swf).
     
  5. Create a SMIL file and copy it to the Wowza Streaming Engine [install-dir]/content folder. This example uses a SMIL file named vod-smil.smil.
    <smil>
        <head>
        </head>
        <body>
            <switch>
                <video src="bigbuckbunny_1100.mp4" system-bitrate="1144100"/>
                <video src="bigbuckbunny_750.mp4" system-bitrate="794100"/>
                <video src="bigbuckbunny_450.mp4" system-bitrate="494100"/>
            </switch>
        </body>
    </smil>
  6. Edit the flowplayer/example/index.html in the root directory of the zip archive.

    The following example player code for on-demand adaptive-bitrate streaming uses vod-smil.smil. Replace [wowza-ip-address] with the IP address of your Wowza Streaming Engine server.
    <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.x.x.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.x.x.swf", {
    
    	// The playlist is loaded from the RSS file
    	clip: {
    	url: "http://[wowza-ip-address]:1935/vod/smil:vod-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.x.x.swf'
    	},
    
    	// bandwidth check plugin
    	bwcheck: {
    	url: 'flowplayer.bwcheck-3.x.x.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]/vod',
    
    	// 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]/vod'
    	},
    
    	// 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>
  7. Copy the Flowplayer folder to a web server, and then open this folder in a browser:
    http://[webserver-address]/flowplayer/example/index.html
    Where:
     
    • [wowza-ip-address]: is the IP address of your Wowza Streaming Engine server.
       
    • vod: is the name of the Wowza Streaming Engine on-demand application.
       
    • vod-smil.smil: is the name of the SMIL file located in [install-dir]/content
Note: For testing adaptive bitrate streaming, overlay text alerts you to a switch to a different bitrate stream by displaying text such as: Switched to: mp4:bigbuckbunny_450.mp4.

Flash security restriction


Because of 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 them, open a browser and enter the URL for the index.html file.

If you want to play the video locally without hosting the file on your 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.
 
  1. Right-click the Flash movie below the title single file, with preview image, and then select Settings from the popup menu.
     
  2. Click Advanced. A browser window will be displayed.
     
  3. Click the Global Security Settings Panel link. A new webpage will open with a Flash .swf file in the upper-right corner.
     
  4. In this Flash movie, select Add location from the Edit locations popup menu.
     
  5. Click Browse for files, find and select flowplayer-3.x.x.swf, and then click Open. Do this for each of the three files.
     
  6. To play, close all open web browser windows, and then double-click flowplayer/examples/index.html.

More resources