• How to use 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.

    Contents


    Basic setup
    Video on demand playback example
    Live playback example
    Adobe HTTP streaming 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

    1. Download and install Wowza Media Server.

    2. Download FlowPlayer Flash and extract the contents from the downloaded, compressed (zipped) file.

    3. Download the RTMP Streaming plug-in .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.

    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 filename for the current version of Flowplayer and in the RTMP Streaming plug-in filename for the current version of the plug-in.
      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.

    2. 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

    1. Set up an application for live streaming by following one of our live streaming tutorials.

    2. 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 plug-in filename for the current version of the plug-in.
      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.


    Adobe HTTP streaming playback example

    In order to play back an Adobe HDS stream, you will need the Flowplayer 'httpstreaming' plug-in which requires the F4M clip resolver plugin to resolve the streams from the F4M manifest file. See this Flowplayer page for reference.
    Code:
    <html>
      <head>
        <script type="text/javascript" src="http://releases.flowplayer.org/js/flowplayer-3.2.13.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.2.18.swf", {
       		plugins: {
            	f4m: {
               	 url: "http://releases.flowplayer.org/swf/flowplayer.f4m-3.2.10.swf",
               	 dvrBufferTime: 5,
               	 liveBufferTime: 5
            	},
           	 	httpstreaming: {
                	url: "http://releases.flowplayer.org/swf/flowplayer.httpstreaming-3.2.11.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 server running Wowza Media Server.

    • live: is the name of the Wowza Media Server application.

    • myStream: is the name of the live stream.

    nDVR playback example

    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>

    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 plug-ins 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
    1. Follow the instructions in Instructions for basic setup.

    2. Download SMIL plug-in .swf file and copy into the unzipped FlowPlayer folder (inside the inner flowplayer folder that contains flowplayer-3.x.x.swf).

    3. Download Content plug-in .swf file and copy into the unzipped FlowPlayer folder (inside the inner flowplayer folder that contains flowplayer-3.x.x.swf).

    4. Download bandwidth detection plug-in .swf file and copy into the unzipped FlowPlayer folder (inside the inner flowplayer folder that contains flowplayer-3.x.x.swf).

    5. 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>
    6. 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 plug-in reads in and parses the SMIL, and provides
      	// the bitrates info to the bw detection plug-in
      	smil: {
      	url: 'flowplayer.smil-3.2.2.swf'
      	},
      	
      	// bandwidth check plug-in
      	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 plug-in
      	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>
    7. 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.


    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.

    1. Right click on 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 browsers windows and double-click flowplayer/examples/index.html.



    Comments 31 Comments
    1. TechSupport -
      "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.
    1. rrlanham -
      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
    1. bartvels -
      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?
    1. rrlanham -
      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
    1. bartvels -
      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.
    1. rrlanham -
      Just create that folder: install-location]/applications/simplevideostreaming

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

      Richard
    1. koobos -
      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!
    1. rrlanham -
      If the audio track is mp3, that might be the reason. AAC is required on Android

      Richard
    1. koobos -
      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.
    1. rrlanham -
      Try a very lower bitrate, Baseline 3, and small frame size.

      Richard
    1. cnfcnf -
      Can this be updated for use with the nDVR?
    1. rrlanham -
      As mentioned in other thread, no Flowplayer doesn't work with nDVR. You need OSMF player like Strobe

      Richard
    1. 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
    1. randall -
      Barry,

      They're moving everything over to "wowza.com" from "wowza.com". Try this: http://www.wowza.com/forums/content....h-Wowza-Server
    1. GriselZolondek -
      Quote Originally Posted by BarrySDCA View Post
      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
    1. del-mt -
      Can update that for use too in flowplayer 5?
    1. rrlanham -
      I don't know what you are referring to

      Richard
    1. del-mt -
      I am referring to the new version of flowplayer 5.0.0 with html5. This tutorial referrs to Flowplayer 3.x...
    1. fmblanco -
      Quote Originally Posted by del-mt View Post
      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
    1. fmblanco -
      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>