Quick and Easy RTMP Flash Streaming Video with Red5 on FreeBSD

Publish Live Streaming Video on a Web Page

At this point you are already publishing live streaming video through RTMP.  However, you probably want to embed this live video stream on a web page to make is easy for visitors to view the video stream.  To do this, you will need a Flash video player.  Their are literally hundreds available, some free, some paid.  Two of the best are JW Player and Flowplayer.  In this example, we will use Flowplayer.

Download the Flowplayer and the RTMP Plugin from the Flowplayer website.  This HelpFile assumes you are using Flowplayer 3.2.x series.

Extract all the files and place the following files on your webserver:

  • flowplayer-3.2.x.min.js
  • flowplayer.rtmp-3.2.3.swf
  • flowplayer-3.2.x.swf
  • flowplayer.controls-3.2.x.swf

Create a new HTML file and add the JavaScript file to it in the head area.

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

Create an empty div tag to hold the video.  You may also define any CSS styles.

<div style="display:block;width:520px;height:330px" id="player"></div>

Insert the following inline JavaScript and replace the values accordingly.

<script>

    $f("player", "flowplayer-3.2.7.swf", {
      clip: {
        url: 'livestream',
        live: true,
        provider: 'influxis'
      },

      plugins: {
        influxis: {
          url: 'flowplayer.rtmp-3.2.3.swf',
          netConnectionUrl: 'rtmp://<red5-server>/midiDemo'
        }
      }
    });
    </script>

The values that need to be replaced are:

  • clip url: stream name (Example: livestream)
  • netConnectionUrl: FMS URL (Example: rtmp://<red5-server>/midiDemo)

Save the HTML file and upload it to your server. Then, using your web browser open the URL to the HTML file. Your video should play.

Pacy
Powered by Pacy