Navigation Menu

Skip to content

Commit

Permalink
flowplayer LIVE no progress bar, css control, stream not available
Browse files Browse the repository at this point in the history
  • Loading branch information
@mattfrystila
mattfrystila committed Dec 1, 2015
1 parent 475455f commit 78441b1
Show file tree
Hide file tree
Showing 2 changed files with 169 additions and 53 deletions.
6 changes: 6 additions & 0 deletions crossdomain.xml
View file
@@ -0,0 +1,6 @@
<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM
"http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<allow-access-from domain="segments/chHD5/" />
</cross-domain-policy>
216 changes: 163 additions & 53 deletions index.html
View file
@@ -1,56 +1,166 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<!-- 1. skin https://flowplayer.org/docs/skinning.html -->
<link rel="stylesheet" href="//releases.flowplayer.org/6.0.4/skin/minimalist.css">

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//releases.flowplayer.org/6.0.4/flowplayer.min.js"></script>
<script src="//releases.flowplayer.org/hlsjs/flowplayer.hlsjs.min.js"></script>
<link rel="stylesheet" href="mystyles.css">

</head>
<body>
<div id="hlsjs" class="is-closeable"></div>

<div class="info">
<p>player engine: <span id="engine"></span></p>

<p>video type: <span id="vtype"></span></p>

<p>video source: <span id="src"></span></p>
</div>
</body>
<script type="text/javascript">
window.onload = function () {

flowplayer("#hlsjs", {
splash: true,
embed: false, // setup would need iframe embedding
ratio: 5/12,

clip: {
sources: [
{ type: "application/x-mpegurl",
src: "http://200.42.4.13:8080/segments/chHD5/AEHD_StreamA.m3u8" },
{ type: "video/webm",
src: "//drive.flowplayer.org/202777/84049-bauhaus.webm" },
{ type: "video/mp4",
src: "//drive.flowplayer.org/202777/84049-bauhaus.mp4" }
]
}

}).on("ready", function (e, api, video) {
// info for demo purposes
document.getElementById("engine").innerHTML = api.engine.engineName;
document.getElementById("vtype").innerHTML = video.type;
document.getElementById("src").innerHTML = video.src;

});

};

</script>


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

<!-- 1. skin https://flowplayer.org/docs/skinning.html -->
<link rel="stylesheet" href="//releases.flowplayer.org/6.0.4/skin/minimalist.css">

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//releases.flowplayer.org/6.0.4/flowplayer.min.js"></script>
<script src="//releases.flowplayer.org/hlsjs/flowplayer.hlsjs.min.js"></script>
<link rel="stylesheet" href="mystyles.css">
<style>

#content {
max-width: 720px;
}
.flowplayer {
background: #777;
margin-bottom: 30px;
}

/* customized error message */
.flowplayer.is-error .fp-message {
background-image: url(http://demos.flowplayer.org/media/img/interruption.png);
background-size: contain;
background-repeat: no-repeat;
}
.flowplayer.is-error .fp-message h2,
.flowplayer.is-error .fp-message p {
font-weight: bold;
color: #000;
text-shadow: 1px 1px #fff
}
.flowplayer.is-error .fp-message h2 {
font-size: 200%;
}
.flowplayer.is-error .fp-message p {
font-size: 150%;
}

</style>
</head>
<body>
<div id="live" class="fixed-controls"></div>

<!-- for demo purposes only -->
<div class="info">
<p><button id="dummy" type="button">Simulate dummy stream</button>
<button id="nonexistent" type="button">Simulate non existent stream</button>
<button type="button">Play configured stream</button></p>
</div>
</body>


<script type="text/javascript">
window.onload = function () {

var container = document.getElementById("live"),
timer,

player = flowplayer(container, {
ratio: 9/16,
splash: true,
live: true,
clip: {
flashls: {
// limit amount of retries to load hls manifests in Flash
manifestloadmaxretry: 3
},
sources: [
{ type: "application/x-mpegurl",
src: "http://200.42.4.13:8080/segments/chHD5/AEHD_StreamA.m3u8" }
]
}
}).on("load", function (e, api) {
clearInterval(timer);

if (api.engine.engineName == "html5") {
// generic hls: trigger error when playlist is present, but no streams
setTimeout(function () {
if (api.loading && !api.error) {
api.trigger("error", [api, {code: 4}]);
}
}, 10000);
}

}).on("error", function (e, api, err) {
var delay = 20,
header = container.querySelector(".fp-message h2"),
detail = container.querySelector(".fp-message p");

if (err.code === 4 || err.code === 9) {
header.innerHTML = "We are sorry, currently no live stream available.";
detail.innerHTML = "Retrying in <span>" + delay + "</span> seconds ...";

if (flowplayer.support.flashVideo) {
api.one("flashdisabled", function () {
container.querySelector(".fp-flash-disabled").style.display = "none";
});
}

timer = setInterval(function () {
delay = delay - 1;
detail.querySelector("span").innerHTML = delay;

if (delay == 0) {
clearInterval(timer);
api.error = api.loading = false;
container.className = container.className.replace(/ *is-error */, "");
api.load(api.conf.clip);
}

}, 1000);
}
}),


/*
* the following is for demo purposes and simulation only
* do not use in production!
*/

buttons = document.getElementsByTagName("button"),
i;

for (i = 0; i < buttons.length; i += 1) {
buttons[i].onclick = function () {
var errorstream = !this.id
? null
: this.id == "dummy"
? "//stream.flowplayer.org/dummy-live.m3u8"
: "//stream.flowplayer.org/non-existent.m3u8";

if (player.error) {
// clean retry
player.error = player.loading = false;
container.className = container.className.replace(/ *is-error */, "");
}

if (errorstream) {
player.load({
sources: [
{ type: "application/x-mpegurl", src: errorstream }
]
});
} else {
player.load(player.conf.clip);
}
};
}

};









</script>
</html>

0 comments on commit 78441b1

Please sign in to comment.