Flowplayer · Overlay jQueryTools

Flowplayer in an overlay by jQueryTools. The videos are offered in HLS and multiple resolutions like with Flowplayer Drive.

To keep the player of flexible size we create an overlay of flexible size.

<head/>

Here is how to load the assets for scrollable and quality selection.

Caveat: Because jQueryTools are not completely compatible with jQuery version 1.9+ an older version of the jQuery library is used.

<!-- load a pre 1.9 version of the jquery library -->
<script src="//code.jquery.com/jquery-1.8.3.min.js"></script>
<!-- the Flowplayer script as usual -->
<script src="//releases.flowplayer.org/7.1.0/flowplayer.min.js"></script>
<!-- The hlsjs plugin (light) for playback of HLS without Flash in modern browsers -->
<script src="//releases.flowplayer.org/hlsjs/flowplayer.hlsjs.light.min.js"></script>
<!-- the VOD quality selector plugin -->
<script src="//releases.flowplayer.org/vod-quality-selector/flowplayer.vod-quality-selector.js"></script>
<!-- jQuery Tools -->
<script src="http://cdn.jquerytools.org/1.2.7/all/jquery.tools.min.js"></script>

HTML

<style>

#overlay {
display: none;
width: 80%;
/* a border, so the player can fill the flexible-sized overlay */
border: 20px solid #fff;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
background-color: #fff;
-webkit-box-shadow: 0 0 40px #000;
-moz-box-shadow: 0 0 40px #000;
box-shadow: 0 0 40px #000;
}
#overlay .close {
display: block;
position: absolute;
top: -35px;
right: -35px;
width: 35px;
height: 35px;
background-image: url(//jquerytools.github.io/media/img/overlay/close.png);
-webkit-border-radius: 35px;
-moz-border-radius: 35px;
border-radius: 35px;
cursor: pointer;
}
 
#overlay-player {
background-color: #000;
}
 
#overlay-triggers {
color: #777;
list-style: none;
font-size: 18px;
width: 7em;
margin-left: 7em;
}
#overlay-triggers li {
cursor: pointer;
background: url(//d12zt1n3pd4xhr.cloudfront.net/fp/img/fp5arrow.png) 0 2px no-repeat;
padding-left: 24px;
margin: 0.5ex 0;
}
#overlay-triggers li:hover {
color: #111;
}

CSS

<script>

$(function () {
var api;
 
$("#overlay-triggers li").overlay({
target: "#overlay",
closeOnEsc: false, // see comment on flowplayer keyboard option above
top: "7%",
left: "7%",
mask: {
color: "#000",
opacity: 0.3
},
speed: "slow",
onBeforeLoad: function () {
// derive file names from trigger index
var i = $("#overlay-triggers li").index(this.getTrigger()) + 1,
base = "night" + i,
cdn = "//edge.flowplayer.org/",
root = cdn + base,
clip = {
qualities: ["216p", "360p", "720p"," 1080p"],
defaultQuality: "360p",
sources: [
{ type: "application/x-mpegurl", src: root + ".m3u8" },
{ type: "video/mp4", src: root + ".mp4" },
{ type: "video/flash", src: "mp4:" + base }
]
};
 
if (api === undefined) {
// initial load
api = flowplayer("#overlay-player", {
clip: clip,
splash: true,
// set keyboard to false if you don't want to use closeOnEsc: false for overlay
// keyboard: false,
rtmp: "rtmp://s3b78u0kbtx79q.cloudfront.net/cfx/st",
ratio: 9/16
});
api.load();
 
} else {
api.load(clip);
}
},
 
onBeforeClose: function (e) {
if (api.loading) {
e.preventDefault();
} else {
// important! unload the player
api.unload();
}
}
});
});

JavaScript

<body/>

<ul id="overlay-triggers">
<li>Video 1</li>
<li>Video 2</li>
<li>Video 3</li>
<li>Video 4</li>
<li>Video 5</li>
<li>Video 6</li>
<li>Video 7</li>
</ul>
 
<div id="overlay">
<a class="close" title="close"></a>
<div id="overlay-player"></div>
</div>

HTML

See also these alternatives using the Flowplayer overlay plugin:

Common to all overlay implementations is the fact that the player must be loaded/unloaded or shut down explicitly in the corresponding (before)load/(before)close events of the overlay. This is mandatory to avoid errors when the Flash engine is running, especially in Internet Explorer.