If you want to use HLS or DASH, do not use MP3 codec because it is not supported by the Chrome.
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>
<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>
CESNET, z. s. p. o.
Generála Píky 26
16000 Prague 6
Tel: +420 234 680 222
Fax: +420 224 320 269
info@cesnet.cz
Tel: +420 234 680 222
GSM: +420 602 252 531
Fax: +420 224 313 211
support@cesnet.cz