Flowplayer · Background plugin

The background plugin provides an easy way to show a video as background "image" of the page.

On devices which do not allow autoplay a button to start/stop the video is offered.

<head/>

Load the background stylesheet and plugin:

<!-- the background plugin stylesheet -->
<link rel="stylesheet"
href="//releases.flowplayer.org/background/flowplayer.background.css">
 
<!-- ... -->
<!-- Flowplayer library -->
<script src="//releases.flowplayer.org/7.0.2/flowplayer.min.js">
</script>
<!-- Flowplayer hlsjs engine -->
<script src="//releases.flowplayer.org/hlsjs/flowplayer.hlsjs.min.js">
</script>
<!-- Flowplayer background plugin -->
<script src="//releases.flowplayer.org/background/flowplayer.background.min.js">
</script>

HTML

<style>

Show a "real" background image on devices which do not allow autoplay:

body {
background-color: #d3edf8;
}
#background,
#background.is-loading {
background-color: #9cf;
background-image: url(//cdn.flowplayer.org/202777/210503-snap.jpg);
}
#background-trigger {
display: none; /* show only when needed */
position: fixed;
top: 10px;
right: 5px;
background-color: #80bfff;
color: #fff;
font-size: 90%;
padding: 6px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
cursor: pointer;
}

CSS

<script>

Install the player, and enable background video with the background option:

flowplayer(function (api) {
// work around iOS HLS loop bug
if (/iP(hone|ad|od)/.test(navigator.userAgent)) {
api.on("ready", function (e, api, video) {
if (video.type.toLowerCase().indexOf("mpegurl") > -1) {
api.addCuepoint(video.duration);
}
}).on("cuepoint", function (e, api) {
api.seek(0).resume();
});
}
});
 
window.onload = function () {
var bgTrigger = document.getElementById("background-trigger"),
bgStateToggle = bgTrigger.querySelector("span"),
autoplay = flowplayer.support.firstframe,
 
bgPlayer = flowplayer("#background", {
 
// show this video in the background
background: true,
 
ratio: 16/9,
clip: {
sources: [
{ type: "application/x-mpegurl",
src: "//cdn.flowplayer.org/202777/210503.m3u8" },
{ type: "video/mp4",
src: "//cdn.flowplayer.org/202777/210503.mp4" }
]
}
}).on("load unload", function (e, api) {
bgStateToggle.innerHTML = e.type.indexOf("u") < 0 ? "Stop" : "Start";
 
});
 

if (!autoplay) {
bgTrigger.style.display = "inline";
 
bgTrigger.onclick = function () {
if (bgPlayer.ready) {
bgPlayer.unload();
} else {
bgPlayer.load();
}
};
}
 
};

JavaScript

<body/>

<!-- ... -->
<!-- foreground content above -->
 
<!-- offer background video playback on devices not allowing autoplay -->
<p id="background-trigger"><span>Start</span> background video</p>
 
<div id="background"></div>

HTML

Start background video