Flowplayer CDN integration

Introduction

Please click here if you want to integrate on-demand stream and please click here if you want to integrate live stream.

Integration of CDN Video or CDN Video Push service

Create a CDN Video or CDN Video Push service

Please refer to Creating a CDN Video service for more details.

Let's assume that 12345.r.cdnsun.net is the Service Identifier of your CDN Video service.

Enable CDN Video service in the Flowplayer

<link rel="stylesheet" href="https://releases.flowplayer.org/5.5.2/skin/minimalist.css">
<style>
   #mediaplayer {
                 width: 480px;
                 height: 320px;
   }
</style>
<div id="mediaplayer"></div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="https://releases.flowplayer.org/5.5.2/flowplayer.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){ 
        $('#mediaplayer').flowplayer({
            'rtmp': 'rtmp://12345.r.cdnsun.net/12345/_definst_',            
            'playlist': [[
              {
                'flash': 'mp4:12345/myvideo.mp4'
              },
              {
                'mpegurl': 'http://12345.r.cdnsun.net/12345/_definst_/mp4:12345/myvideo.mp4/playlist.m3u8'
              }                      
            ]],
            'embed': false
        });
    });
</script>

Please note that your video has to be in MP4 or FLV container format and encoded with H.264 video codec and AAC or MP3 audio codec. Please refer to Services/How-To for your streaming CDN URLs.

Integration of CDN Live service

Create a CDN Live service

Please refer to Creating a CDN Live service for more details.

Let's assume that 12345.r.cdnsun.net is the Service Identifier of your CDN Live service.

Enable CDN Live service in the Flowplayer

<link rel="stylesheet" href="https://releases.flowplayer.org/5.5.2/skin/minimalist.css">
<style>
   #mediaplayer {
                 width: 480px;
                 height: 320px;
   }
</style>
<div id="mediaplayer"></div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="https://releases.flowplayer.org/5.5.2/flowplayer.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){ 
        $('#mediaplayer').flowplayer({
            'live': true,            
            'rtmp': 'rtmp://12345.r.cdnsun.net/12345/_definst_',            
            'playlist': [[
              {
                'flash': 'mystream'
              },
              {
                'mpegurl': 'http://12345.r.cdnsun.net/12345/_definst_/mystream/playlist.m3u8'
              }                      
            ]],
            'embed': false
        });
    });
</script>

Please note that your origin live stream has to be in MP4 or FLV container format and encoded with H.264 video codec and AAC or MP3 audio codec. Please refer to Services/How-To for your streaming CDN URLs.