Flowplayer · Quality selector plugin outside Drive

< >

Now playing:

The quality selector plugin for Flowplayer Drive can also be used with videos which are not served from Flowplayer Drive. Here is a variant of this demo, but the video files are not loaded from Drive - you can see that the Free player is branded - and a playlist is loaded.

An IFRAME is offered for embedding with the same setup.

Please refer to the plugin documentation for details about the requirements regarding the file name layout and RTMP deployment.

<head/>

The quality selector setup is easy: Simply include the plugin JavaScript and CSS files in the page's HEAD section ...

<!-- a player skin as usual -->
<link rel="stylesheet" href="//releases.flowplayer.org/6.0.5/skin/minimalist.css">
<!-- the quality selector stylesheet -->
<link rel="stylesheet" href="//releases.flowplayer.org/quality-selector/flowplayer.quality-selector.css">
 
<!-- ... -->
<!-- the Flowplayer script as usual -->
<script src="//releases.flowplayer.org/6.0.5/flowplayer.min.js"></script>
<!-- the quality selector plugin -->
<script src="//releases.flowplayer.org/quality-selector/flowplayer.quality-selector.min.js"></script>

HTML

<style>

Basic playlist styling as in this demo.

#qsel {
background-image: url(//flowplayer.org/media/img/demos/minimalist.jpg);
}
@media(-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
#qsel {
background-image: url(//flowplayer.org/media/img/demos/minimalist@x2.jpg);
}
}
 
.flowplayer {
/* allow room for playlist buttons */
margin-bottom: 100px;
}
 
.flowplayer .fp-playlist {
position: absolute;
bottom: -100px;
width: 100%;
text-align: center;
}
 
.flowplayer .fp-playlist a {
display: inline-block;
width: 70px;
height: 70px;
border-radius: 70px;
background-color: #666;
margin: 15px;
}
 
.flowplayer .fp-playlist a.is-active {
background-color: #eee;
}
 
.flowplayer.is-paused .fp-playlist a.is-active {
background-color: #ccc;
}
 
.flowplayer .fp-prev,
.flowplayer .fp-next {
position: absolute;
bottom: -60px;
font-size: 20px;
display: none;
z-index: 1;
cursor: pointer;
}
 
.flowplayer .fp-next {
right: 0;
}
 
.flowplayer.is-ready .fp-next,
.flowplayer.is-ready .fp-prev {
display: inline;
}

CSS

<script>

// set up info for this demo
flowplayer(function (api) {
api.on("load", function (e, api, video) {
document.getElementById("src").innerHTML = video.src;
});
});
 
window.onload = function () {
 
flowplayer("#qsel", {
// quality selector plugin configuration
qualities: ["160p", "260p", "530p", "800p"],
defaultQuality: "260p",
 
// iframe embed config
embed: {
iframe: "http://demos.flowplayer.org/scripting/qsel-iframe.html",
width: 864,
height: 363 // 360 + 3 for slim timeline
},
 
playlist: [{
title: "Minimalist",
 
sources: [
// HLS for automatic quality selection
{ type: "application/x-mpegurl", src: "//edge.flowplayer.org/bauhaus.m3u8" },
 
/* manual selection */
 
// default VOD resolution in 2 formats
{ type: "video/webm", src: "//edge.flowplayer.org/bauhaus.webm" },
{ type: "video/mp4", src: "//edge.flowplayer.org/bauhaus.mp4" },
 
// default VOD resolution via RTMP for Flash in old browsers
{ type: "video/flash", src: "mp4:bauhaus" }
]
}, {
title: "Functional",
sources: [
{ type: "application/x-mpegurl", src: "//edge.flowplayer.org/functional.m3u8" },
{ type: "video/webm", src: "//edge.flowplayer.org/functional.webm" },
{ type: "video/mp4", src: "//edge.flowplayer.org/functional.mp4" },
{ type: "video/flash", src: "mp4:functional" }
]
}, {
title: "Playful",
sources: [
{ type: "application/x-mpegurl", src: "//edge.flowplayer.org/playful.m3u8" },
{ type: "video/webm", src: "//edge.flowplayer.org/playful.webm" },
{ type: "video/mp4", src: "//edge.flowplayer.org/playful.mp4" },
{ type: "video/flash", src: "mp4:playful" }
]
}],
rtmp: "rtmp://s3b78u0kbtx79q.cloudfront.net/cfx/st",
 
// loop playlist
loop: true,
 
splash: true,
ratio: 5/12
});
 
};

JavaScript

<body/>

<div id="qsel" class="is-closeable">
<a class="fp-prev" title="prev">&lt;</a>
<a class="fp-next" title="next">&gt;</a>
</div>

HTML

Iframe embed code

Try out the IFRAME embed code. The embedded page can be inspected here. Take a look at its source to find out about the slight differences:

Disclaimer: It is not possible to offer the IFRAME via HTTPS, but in production you should aim to do so, optimally configuring the location without protocol. Otherwise browsers complain when the IFRAME is embedded on secure pages.