Flowplayer · Recover from bad URL

Bad URL

Good URL

If your intended setup is in danger of containing invalid video sources the first step is to rethink your concept.

This demo implements a seamless recovery mechanism with a replacement video for all player instances with invalid video sources while making sure that no other instances are affected.

See also this demo.

<head/>

<style>

.flowplayer {
background-color: #eee;
}
.flowplayer.replacement .fp-color {
background-color: #ff0;
}

CSS

<script>

// global configuration
flowplayer.conf = {
splash: true,
share: false,
aspectRatio: "47:25"
};
 
flowplayer(function (api, root) {
var alertTimeout; // for optional alert
 
api.on("error", function (e, api, err) {
if (err.code === 4) { // Video file not found
// reset state
api.error = api.loading = false;
$(".fp-message", root).css({opacity: 0});
$(root).removeClass("is-error");
 
// load safe replacement video sources
api.load({
sources: [
{ type: "video/webm", src: "//edge.flowplayer.org/black/470x250.webm" },
{ type: "video/mp4", src: "//edge.flowplayer.org/black/470x250.mp4" }
]
 
}, function (e, api) {
// optional: notify user
$(".fp-message:first", root).remove();
api.message("Replacement video!");
// change timeline color to alert user
$(root).addClass("replacement");
alertTimeout = setTimeout(function () {
$(".fp-message:first", root).remove();
}, 3000);
 
});
 
}
}).on("unload", function () {
// remove optional custom message to avoid duplication on reload
clearTimeout(alertTimeout);
$(".fp-message:first", root).remove();
 
});
});

JavaScript

<body/>

<div class="flowplayer no-volume is-closeable">
<video>
<source type="video/webm" src="invalid.webm">
<source type="video/mp4" src="invalid.mp4">
</video>
</div>
 

<!-- [...] -->
 
<div class="flowplayer no-volume is-closeable">
<video>
<source type="video/webm" src="//edge.flowplayer.org/white/470x250.webm">
<source type="video/mp4" src="//edge.flowplayer.org/white/470x250.mp4">
</video>
</div>

HTML