Flowplayer · Recover from 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.



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



// 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});
// load safe replacement video sources
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



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

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