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;
}
/* replacement notification - can be omitted */
.flowplayer .replacement {
position: absolute;
top: 50px;
left: 5px;
padding: 4px;
background: #fff;
color: #900;
font-weight: bold;
z-index: 1;
display: none;
}
.flowplayer.is-ready .replacement {
display: block;
}

CSS

<script>

// global configuration
flowplayer.conf = {
splash: true,
ratio: 25/47
};
 
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;
 
// change the skin color and alert the user
$(root).removeClass("is-error")
.append("<p class=\"replacement\">Replacement video!</p>");
 
// 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" }
]
});
}
});
});

JavaScript

<body/>

<div class="flowplayer no-background aside-time no-volume no-mute">
<video>
<source type="video/webm" src="invalid.webm">
<source type="video/mp4" src="invalid.mp4">
</video>
</div>
 

<!-- [...] -->
 
<div class="flowplayer no-background aside-time no-volume no-mute">
<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