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



// 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;
// optional: change timeline color to alert user
// 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
api.message("Replacement video!");
}).on("unload", function () {
// remove optional custom message to avoid duplication on reload
$(".fp-message:first", root).remove();



<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">