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) {
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 by replacing error message
$(".fp-message:first", root).remove();
api.message("Replacement video!", 3000);
// change timeline color to alert user
$(root).addClass("replacement");
 
});
 
}
 
});
});

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