General notes

If you want to use HLS or DASH, do not use MP3 codec because it is not supported by the Chrome.

Live streaming

Links to streams based on the technologies supported by us have following structure. Streams which use MPEG DASH or Apple HLS can be watched using HTML5 based player. RTMP stream requires Adobe Flash technology. 

  https://cdn.streaming.cesnet.cz:1935/application/streamname/manifest.mpd
  http://cdn.streaming.cesnet.cz:1935/application/streamname/manifest.mpd
  rtmp://server5.streaming.cesnet.cz:1935/application/streamname
  https://cdn.streaming.cesnet.cz:1935/application/streamname/manifest.f4m
  http://cdn.streaming.cesnet.cz:1935/application/streamname/manifest.f4m
  https://cdn.streaming.cesnet.cz:1935/application/streamname/playlist.m3u8
  http://cdn.streaming.cesnet.cz:1935/application/streamname/playlist.m3u8
  rtsp://server5.streaming.cesnet.cz:1935/application/streamname

Use the following code for inserting the player to your website. In case the user does not have the access to required web browser or mobile device, HTML5 player will be used (with streaming using MPEG DASH or Apple HLS). In another case, the Adobe Flash player will be used. 

<html>

<head>
   <meta charset="utf-8">

      <title>Flowplayer · DASH support</title>                                                                                                                                                         

   <!-- optimize mobile versions -->                                                                                                                                                                   
   <meta name="viewport" content="width=device-width, initial-scale=1.0">                                                                                                                              

   <!-- The "functional" skin - choose from: "functional.css", "minimalist.css", "playful.css" -->
   <link rel="stylesheet" href="//releases.flowplayer.org/6.0.5/skin/functional.css">                                                                                                                  

   <!-- Minimal styling for this standalone page, can be removed -->
   <link rel="stylesheet" href="http://demos.flowplayer.org/media/css/demo.css">                                                                                                                       
   <!-- Syntax highlighting of source code, can be removed -->                                                                                                                                         
   <link rel="stylesheet" href="http://demos.flowplayer.org/media/css/pygments.css">

<style>
.flowplayer.is-splash,
.flowplayer .fp-message {
  background-color: #bbb;                                                                                                                                                                              
}
#dashvod {
  background-image: url(//flowplayer.org/media/img/drive/home/drive-shoot.jpg);                                                                                                                        
  -webkit-background-size: auto 100%;                                                                                                                                                                  
  -moz-background-size: auto 100%;                                                                                                                                                                     
  background-size: auto 100%;
}
@media(-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  #dashvod {
    background-image: url(//flowplayer.org/media/img/drive/home/drive-shoot@2x.jpg);
  }
}

.dash-supported {
  font-weight: bold;
}
</style>

   <!-- Flowplayer library -->
   <script src="//releases.flowplayer.org/6.0.5/flowplayer.min.js"></script>
   
   <!-- The dashjs plugin for DASH support -->
   <script src="//releases.flowplayer.org/dashjs/flowplayer.dashjs.min.js"></script>

   <!-- Flowplayer hlsjs engine for smoother HLS playback in modern browsers (optional) -->
   <script src="//releases.flowplayer.org/hlsjs/flowplayer.hlsjs.min.js"></script>

   <!-- The hlsjs plugin for HLS support -->
   <script src="//releases.flowplayer.org/hlsjs/flowplayer.hlsjs.min.js"></script>

<script>
window.onload = function () {

  var livecontainer = document.getElementById("dashlive");
  flowplayer(livecontainer, {
    ratio: 9/16,
    splash: true,
    clip: {
      live: true,
      sources: [
        // MPEG DASH source
        { type: "application/dash+xml",
          src:  "http://server5.streaming.cesnet.cz:1935/application/streamname/manifest.mpd" },

        // HLS source
        { type: "application/x-mpegurl",
          src:  "http://server5.streaming.cesnet.cz:1935/application/streamname/playlist.m3u8" },

        // default VOD resolution via RTMP for Flash in old browsers
        { type: "video/flash",
          src:  "rtmp://server5.streaming.cesnet.cz:1935/application/streamname" }          
      ]
    }

  }).on("error", function (e, api, err) {
    if (err.code == 5) {
      // customize error as this is not a production scenario
      livecontainer.querySelector(".fp-message h2").innerHTML =
          "Test stream only available as MPEG-DASH";
      livecontainer.querySelector(".fp-message p").innerHTML =
          "Please try in a different browser";
    }

  });

};
</script>

</head>

<body>

   <div id="content">

      <h1>Flowplayer · DASH support</h1>

      <h2 id="live">Live</h2>

      <div id="dashlive" class="no-toggle"></div>

   </div> <!-- end content -->

</body>
</html>

Video on demand

<html>

<head>
   <meta charset="utf-8">

   <title>Flowplayer dashjs plugin · Standalone demo · Flowplayer</title>

   <!-- optimize mobile versions -->
   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <!-- The "functional" skin, "functional.css", "minimalist.css" and "playful.css" are available  -->
   <link rel="stylesheet" href="//releases.flowplayer.org/6.0.5/skin/functional.css">


   <!-- Minimal styling for this standalone page (can be removed) -->
   <style>
   #content {
      margin: 50px auto;
      max-width: 700px;
   }
   </style>


   <!-- Flowplayer-->
   <script src="//releases.flowplayer.org/6.0.5/flowplayer.min.js"></script>
   <script src="//releases.flowplayer.org/dashjs/flowplayer.dashjs.min.js"></script>
   <script src="//releases.flowplayer.org/hlsjs/flowplayer.hlsjs.min.js"></script>

</head>

<body>
<div id="content">

<div id="fp" class="is-closeable"></div>

<script>
flowplayer("#fp", {
    splash: true,
    ratio: 9/16,
    rtmp: "rtmp://server5.streaming.cesnet.cz/vod/",
    embed: false,

    clip: {
        title: "Title", // update
        sources: [

            { type: "application/dash+xml",
              src:  "http://server5.streaming.cesnet.cz:1935/vod/_definst_/cesta/mp4:file_name.mp4/manifest.mpd" },

            { type: "application/x-mpegurl",
              src:  "//server5.streaming.cesnet.cz:1935/vod/_definst_/cesta/mp4:file_name.mp4/playlist.m3u8" },

            { type: "video/flash",
              src:  "mp4:cesta/file_name.mp4" }
        ]
    }

});
</script>


</div><!--/end content -->

</body>

</html>