Flowplayer · Quality selector plugin outside Drive

Now playing:

The VOD 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.

Test without hlsjs plugin.

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 load the VOD quality selector plugin in the page's HEAD section ...

For smoother HLS playback in modern browsers we load the hlsjs plugin. We also offer manual VOD quality selection instead of HLS level selection using the VOD quality selector assets.

<!-- 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 quality selector plugin -->
<script src="//releases.flowplayer.org/vod-quality-selector/flowplayer.vod-quality-selector.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);
}
}

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", {
// iframe embed config
embed: {
iframe: "http://demos.flowplayer.org/scripting/qsel-iframe.html"
},
 
playlist: [{
title: "Minimalist",
 
// template based vod quality selector plugin configuration
vodQualities: {
template: "//edge.flowplayer.org/bauhaus-{q}.{ext}",
qualities: [
"160p",
{ label: "260p", src: "//edge.flowplayer.org/bauhaus.{ext}" },
"530p",
"800p"
]
},
 
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.mp4" }
]
}, {
title: "Functional",
 
// template based vod quality selector plugin configuration
vodQualities: {
template: "//edge.flowplayer.org/functional-{q}.{ext}",
qualities: [
"160p",
{ label: "260p", src: "//edge.flowplayer.org/functional.{ext}" },
"530p",
"800p"
]
},
 
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.mp4" }
]
}, {
title: "Playful",
 
// template based vod quality selector plugin configuration
vodQualities: {
template: "//edge.flowplayer.org/playful-{q}.{ext}",
qualities: [
"160p",
{ label: "260p", src: "//edge.flowplayer.org/playful.{ext}" },
"530p",
"800p"
]
},
 
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.mp4" }
]
}],
rtmp: "rtmp://s3b78u0kbtx79q.cloudfront.net/cfx/st",
 
// loop playlist
loop: true,
 
splash: true,
ratio: 5/12
});
 
};

JavaScript

<body/>

<div id="qsel" class="fp-slim is-closeable">
<a class="fp-prev"></a>
<a class="fp-next"></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.