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;
}
/* show fullscreen button in conjunction with custom message */
.flowplayer.replacement.is-mouseover .fp-header {
z-index: 1 !important;
opacity: 1 !important;
}

CSS

<script>

// global configuration
flowplayer.conf = {
splash: true,
share: false,
aspectRatio: "47:25"
};
 
flowplayer(function (api, root) {
api.on("error", function (e, api, err) {
if (err.code === 4) { // Video file not found
// reset state
api.error = api.loading = false;
 
$(root).removeClass("is-error");
 
// optional: change timeline color to alert user
$(root).addClass("replacement");
 
// 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
api.message("Replacement video!");
});
 
}
}).on("unload", function () {
// remove optional custom message to avoid duplication on reload
$(".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