Bu makalede Ant Media Server ile mobil ve masaüstü tüm tarayıcılarda(Android,IOS,Masaüstü vs..) canlı yayın ve VoD(Video on Demand) yayınları nasıl oynatılır anlatacağım.
Oynatıcı olarak FlowPlayer kullanacağız.
Ant Medya Sunucusu ile VoD Yayınları Oynatma
- madde ile flowplayer görünümünü ayarlayabilirsiniz.
- maddede video tag tabanlı yüklemeler için gerekli olan jquery kütüphanesi dahil edilir.
- maddede flowplayer dahil edilir.
- maddede kaynak tipi olarak “video/mp4” tanımlanır ve src tagı ile de video yolu verilir.
VoD Yayınları İçin Örnek Kodun Tamamı:
<html>
<head>
<title>Flowplayer video</title><!– 1. skin –>
<link rel=”stylesheet” href=”//releases.flowplayer.org/7.2.1/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.2.1/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>
Ant Medya Sunucusu ile Canlı Yayın Oynatma
- madde ile flowplayer görünümünü ayarlayabilirsiniz.
- maddede video tag tabanlı yüklemeler için gerekli olan jquery kütüphanesi dahil edilir.
- maddede flowplayer dahil edilir.
- maddede data-rtmp tagı ile rtmp kaynak IP adresi tanımlanır.
- maddede kaynak tipi “video/flash” olarak tanımlanır ve src tagı da “mp4:vod_test” olarak tanımlanır.
- Bunun altında, kaynak tipi olarak “application/x-mpegurl” tanımlanır ve src ile video dosyası yolu verilir. Örn:”streams/vod_test.m3u8″
Canlı Yayın İçin Örnek Kodun Tamamı:
<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>
Umarım bu makale size yardımcı olmuştur.
