In this post i am going to describe how to Play VoD(Video on Demand) and Live Streams on all mobile and desktop browsers including web browsers in Android, iOS, Desktop etc. Thanks to Ant Media Server, it is very easy to do it now.

We are going to use FlowPlayer as a player.

Playing VoD streams on Ant Media Server

  1. You can define the skin for the flowplayer.
  2. Include jquery library which is needed for video tag based installs.
  3. Include flowplayer.
  4. Define source type as “video/mp4” and provide the path of the video with src tag.

Playing VoD stream Full sample code:

<html>
<head>
<title>Flowplayer video</title>

<!– 1. skin –>
<link rel=”stylesheet” href=”//releases.flowplayer.org/7.0.2/skin/skin.css”>

<!– 2. jquery library – required for video tag based installs –>
<script src=”//code.jquery.com/jquery-1.12.4.min.js”></script>

<!– 3. flowplayer –>
<script src=”//releases.flowplayer.org/7.0.2/flowplayer.min.js”></script>

<!– load the Flowplayer hlsjs engine, including hls.js –>
<script src=”//releases.flowplayer.org/hlsjs/flowplayer.hlsjs.min.js”></script>
</head>
<body>
<div class=”flowplayer”>
<video>
<source type=”video/mp4″ src=”streams/vod_test.mp4″>
</video>
</div>
</body>
</html>

Playing Live Stream on Ant Media Server

  1. You can define the skin for the flowplayer.
  2. Include jquery library which is needed for video tag based installs.
  3. Include flowplayer.
  4. Define  data-rtmp tag as rtmp source IP address
  5. Define source type as “video/flash” and src as “mp4:vod_test”
  6. Below that, define source type as “application/x-mpegurl” and src as  path to your video file such as “streams/vod_test.m3u8”>

Playing Live Stream Full Sample Code:

<html>
<head>
<title>My Flowplayer video</title>

<!– 1. skin –>
<link rel=”stylesheet” href=”//releases.flowplayer.org/7.0.2/skin/skin.css”>

<!– 2. jquery library – required for video tag based installs –>
<script src=”//code.jquery.com/jquery-1.12.4.min.js”></script>

<!– 3. flowplayer –>
<script src=”//releases.flowplayer.org/7.0.2/flowplayer.min.js”></script>

<!– load the Flowplayer hlsjs engine, including hls.js –>
<script src=”//releases.flowplayer.org/hlsjs/flowplayer.hlsjs.min.js”></script>
</head>
<body>
<div class=”flowplayer” data-rtmp=”rtmp://127.0.0.1/vod”>
<video>
<source type=”video/flash” src=”mp4:vod_test”>
<source type=”application/x-mpegurl” src=”streams/vod_test.m3u8″>
</video>
</div>
</body>
</html>

Hope this post helps you.

[Total: 2    Average: 3/5]
Categories: Tutorial