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;
/* 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;



// 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
.append("<p class=\"replacement\">Replacement video!</p>");
// 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" }



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

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