Home > Knowledgebase > Wowza Streaming > Flow Player > How do I configure FlowPlayer for flash streaming?


How do I configure FlowPlayer for flash streaming?




Step 1: Download and install necessary files

Download FlowPlayer from http://www.flowplayer.org/download/index.html

For rtmp flash streaming, you'll also need to download the Influxis rtmp plugin from http://www.flowplayer.org/plugins/streaming/rtmp.html

The following files from the above downloads should be uploaded to the directory on your website where you'll be creating your FlowPlayer player page:

flowplayer-3.1.4.min.js
flowplayer-3.1.5.swf
flowplayer.controls-3.1.5.swf
flowplayer.rtmp-3.1.3.swf

(Note that when the FlowPlayer or RTMP plugin versions change, the above files will have different embedded version numbers.)

Step 2: Create a player page for on-demand streaming

The bare minimum requirements for an on-demand player page are these:

In the head section of the page, you need a script tag pointing to the flowplayer javascript file:

<script type="text/javascript" 
src="flowplayer-3.1.4.min.js">
</script>

In the body of the page, you'll need an anchor or div tag representing the section of the page containing the player:

<a style="display:block;width:720px;height:420px" id="player">
<img src="/images/splash.jpg">
</a>

The img tag within the anchor tag above will be a splash image. It will be displayed until you click it to start the video. Omit the img tag if you don't want a splash image. Make your splash image the same dimensions as the video and the styling of the anchor tag, and make sure it has a play button in the middle of the image, or at least some text that informs the visitor he must click the image to start the video.

Also within the body of the page, you'll need this script code to display the player:

<script>
flowplayer("player", "flowplayer-3.1.5.swf", {

clip: {
url: 'Extremists',
provider: 'rtmp'
},

plugins: {
rtmp: {
url: 'flowplayer.rtmp-3.1.3.swf',
netConnectionUrl: 'rtmp://domain.com/archive'
}
}
});
</script>

Note the two highlighted portions. These are the portions of the code where you identify the name of the clip, and the rtmp URL to your streaming. You will change these example values to match your own requirements. Files to be streamed on-demand should be uploaded to your flash_media folder (more information in the instructions email you were sent when your flash streaming service was provisioned.)

Also, remember the clip naming requirements are as follows:

If the clip is a flash (.flv) file, no file extension is necessary - hence Extremists to display the Extremists.flv clip.

If the clip is non-flash, i.e. quicktime mp4 (.mov), standard mp4 (.mp4, .m4v), or mp3 audio (.mp3), you need to include the file extension and a prefix, i.e. mp4:file.mov, mp4:file.mp4, mp4:file.m4v or mp3:file.mp3 (where file is replaced with your own filename.)

Step 3: Create a player page for live streaming

Again, In the head section of the page, you need a script tag pointing to the flowplayer javascript file:

<script type="text/javascript" 
src="flowplayer-3.1.4.min.js">
</script>

In the body of the page, you'll need an anchor or div tag representing the section of the page containing the player:

<a style="display:block;width:720px;height:420px" id="player">
<img src="/images/splash.jpg">
</a>

The live player page code will be very similar to the above on-demand page, with just three key changes, highlighted below.

<script>
flowplayer("player", "flowplayer-3.1.5.swf", {

clip: {
url: 'livestream',
live: 'true',
provider: 'rtmp'
},

plugins: {
rtmp: {
url: 'flowplayer.rtmp-3.1.3.swf',
netConnectionUrl: 'rtmp://domain.com/live'
}
}
});
</script>

In the code above, we've 1) changed the clip url to 'livestream', the default stream name for live streaming, 2) added a live: 'true' parameter and 3) changed the rtmp URL to indicate our live streaming application.



Was this answer helpful?

Add to Favorites Add to Favorites    Print this Article Print this Article

Also Read

  •