How to embed RTMP stream with flowplayer

This approach is to embed flowplayer into a website and use it to play videos that are hosted on a video streaming server. It works pretty well on my Ubuntu 20.04 box.  The main procedures are as follows:

  • Set up RTMP and make sure it works.
  • Inside your web root folder (e.g. /var/www/html), create a ‘player’ folder: mkdir player
  • Download the following files and put them in the ‘player’ folder:
    • sudo wget http://releases.flowplayer.org/swf/flowplayer-3.2.16.swf
    • sudo wget http://releases.flowplayer.org/swf/flowplayer.controls-3.2.15.swf
    • sudo wget http://releases.flowplayer.org/swf/flowplayer.rtmp-3.2.13.swf
  • Create the HTML. Here is a sample:
<html>
<head>
    <!-- flowplayer javascript component -->
    <script src="https://releases.flowplayer.org/js/flowplayer-3.2.13.min.js"></script> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head> 
<body>
<div id="player" style="width:480px;height:270px;margin:0 auto;text-align:center"></div>
<script>
flowplayer("player", "player/flowplayer-3.2.16.swf", {
    clip: {
        //name of the clip or put in 'user?pass=<yourpassword>' format if rtmp authentication is required
        url: 'sample.mp4', 

        scaling: 'fit',
        provider: 'rtmp',
        live: true,        
    },
 
    plugins: {
        rtmp: {
            url: "player/flowplayer.rtmp-3.2.13.swf",
 
            // netConnectionUrl defines where the streams are found
            netConnectionUrl: 'rtmp://<yourdomainname>:1935/stream'
        }
    },
    
    canvas: {
        backgroundGradient: 'none'
    }
});
</script>
</body>
</html>

Leave a Reply