Flowplayer · Quality selection based on feature detection

now playing:

 

 

This demo implements automatic quality selection base on client feature detection, a static but easy to implement alternative if no HLS streams are available. These are the criteria how resolutions are chosen when the player loads:

To ensure that the player behaves exactly the same way when it is embedded, the iframe option points to a page which contains nothing besides a replication of this installation.

Compare this with the alternative demo which features adaptive bit rate switching combined with manual quality selection as offered by Flowplayer Drive.

<head/>

<style>

#auto {
background-color: #ccc;
}

CSS

<script>

The WEBM and MP4 videos are marked with a resolution label like -720p, except for the 360p default resolution. The naming scheme is the same as for Flowplayer Drive's multiple resolution results.

// for demo info, not in production: set up api to report info
flowplayer(function (api) {
var srcinfo = document.getElementById("clip"),
resinfo = document.getElementById("res");
 
// report current src and resolution for demonstratation purposes
api.on("ready", function(e, api, video) {
srcinfo.innerHTML = video.src;
if (video.type != "mpegurl") {
resinfo.innerHTML = "resolution: " + video.width + "x" + video.height;
} else {
resinfo.innerHTML = "adaptive choice of bitrate and resolution";
}
}).on("unload", function () {
// reinsert non-breakable space
srcinfo.innerHTML = "\u00A0";
resinfo.innerHTML = "\u00A0";
});
});
 

// install player when document is ready
// and decide on video resolution depending on client features
window.onload = function () {
var cdn = "//edge.flowplayer.org/",
base = "FlowplayerHTML5forWordPress",
// filename label for automatic selection
// depending on device capabilities
label = !flowplayer.support.inlineVideo ? "-216p" : flowplayer.support.firstframe ? "-720p" : "";
 
// install the player
// it will load the video in the determined resolution
flowplayer("#auto", {
embed: {
// embed iframe which will load exactly this setup
iframe: "http://demos.flowplayer.org/scripting/qsel-auto-iframe.html",
width: 640,
height: 402 // add vertical space to avoid scrollbars
},
// explicitly allow fullscreen, so embedded iframe can go fullscreen
fullscreen: true,
// iOS only allows native fullscreen from within iframes
native_fullscreen: /ip(ad|hone|od)/i.test(navigator.userAgent),
splash: true,
ratio: 9/16,
clip: {
title: "Flowplayer HTML5 for WordPress",
rtmp: "rtmp://s3b78u0kbtx79q.cloudfront.net/cfx/st",
sources: [
{ type: "video/webm", src: cdn + base + label + ".webm" },
{ type: "video/mp4", src: cdn + base + label + ".mp4" },
{ type: "video/flash", src: "mp4:" + base + label }
]
}
});
 
};

JavaScript

<body/>

<div id="auto" class="is-closeable"></div>
 
<div class="info">
<p>now playing:</p>
 
<p id="clip">&nbsp;</p>
 
<p id="res">&nbsp;</p>
</div>

HTML

The iframe for embedding

The IFRAME offered for embedding can be found here. It looks like this:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
 
<link rel="stylesheet" href="//releases.flowplayer.org/7.0.2/skin/minimalist.css">
 
<style>
body, html {
font-family: "myriad pro", tahoma, verdana, arial, sans-serif;
font-size: 12px;
}
#auto {
background-color: #ccc;
position: absolute;
top: 0;
left: 0;
}
</style>
 
<script src="//releases.flowplayer.org/7.0.2/flowplayer.min.js"></script>
<script>
// install player when document is ready
// and decide on video resolution depending on client features
window.onload = function () {
var cdn = "//edge.flowplayer.org/",
base = "FlowplayerHTML5forWordPress",
// filename label for automatic selection
// depending on device capabilities
label = !flowplayer.support.inlineVideo ? "-216p" : flowplayer.support.firstframe ? "-720p" : "";
 
// install the player
// it will load the video in the determined resolution
flowplayer("#auto", {
embed: {
// embed iframe which will load exactly this setup
iframe: "http://demos.flowplayer.org/scripting/qsel-auto-iframe.html",
width: 640,
height: 402 // add vertical space to avoid scrollbars
},
// explicitly allow fullscreen, so embedded iframe can go fullscreen
fullscreen: true,
// iOS only allows native fullscreen from within iframes
native_fullscreen: /ip(ad|hone|od)/i.test(navigator.userAgent),
splash: true,
ratio: 9/16,
clip: {
title: "Flowplayer HTML5 for WordPress",
rtmp: "rtmp://s3b78u0kbtx79q.cloudfront.net/cfx/st",
sources: [
{ type: "video/webm", src: cdn + base + label + ".webm" },
{ type: "video/mp4", src: cdn + base + label + ".mp4" },
{ type: "video/flash", src: "mp4:" + base + label }
]
}
});
 
};
</script>
</head>
 

<body>
 
<div id="auto" class="is-closeable"></div>
 
</body>
</html>

HTML