Adding video player for your website with RTMP & HLS support

Published by: 0

If you are looking to keep RTMP along with HLS (for mobile) running on your website at no cost, then this course is for you.

  1. You need to download jwplayer 5.10. This version of jwplayer is still free and can provide RTMP and HLS directly.
  2. Extract the package and copy jwplayer.min.js and player.swf to your webspace
  3. Now, load the jwplayer.min.js for your page. <script type='text/javascript' src='jwplayer.min.js'></script>
  4. Add the video player container <div id='mediaplayer'></div>
  5. For the desktop RTMP player, add the following code. Where the rtmp://server:1935 will be your RTMP server and the applicationname is the name of your RTMP applicationname where the video file/stream can be located.
<script type="text/javascript">
  jwplayer('mediaplayer').setup({
    'id': 'playerID',
    'width': '480',
    'height': '270',
    'provider': 'rtmp',
    'streamer': 'rtmp://server:1935/applicationname/',
    'file': 'mp4:bigbuckbunny_450.mp4',
    'modes': [
        {type: 'flash', src: 'player.swf'},
    ]
  });
</script>

6. For the mobile player, add the following . Where the hsl-URL is the streaming path to your HLS server for the playlist.m3u8 

<video width="640" height="400" controls="controls" src="hsl-URL/playlist.m3u8" control="control"> </video>

That’s it. You can add browser detection code on your page to detect if the client’s browser is a desktop or mobile to display each code.

Related posts