Quality selection

 

Optimal quality. Always.

Flowplayer Drive offers Adaptive Bit Rate streaming (ABR) and quality selection when you choose the Premium profile and includes the necessary components in its player embed codes. Our transcoder produces up to four different resolutions for both MP4 and WEBM, plus up to eight for HLS - the specific number of these produced depends on the resolution of the original video.

For smoother HLS playback in modern browsers the hlsjs plugin is loaded right after the Flowplayer script.

The player loads with the "Auto" entry selected. "Auto" for Automatic selection of HLS streams with ABR. The optimal quality/bitrate is selected automatically based on the user's connection speed and device/browser capabilities. Alternatively the viewer can choose from a range of static resolutions/qualities. The manual selection is also available in the rare cases when HLS cannot be played.

If you are not a Drive user, just add the Flowplayer quality-selector plugin to your site and adjust a few data attributes to enable quality selection for HTML5 video. See our example outside Drive for usage instructions.

Our documentation on transcoding to multiple resolutions and HLS demonstrates the result of the original Drive code. Here we transform the Drive Share page into a pure JavaScript installation, so we can re-use the same install script here and for a page which is propagated as IFRAME by the player's embed code.

<!-- share complete setup on Twitter -->
<meta name="twitter:card" content="player">
<meta name="twitter:site" content="@flowplayer">
<meta name="twitter:title" content="Quality selection in Flowplayer Drive">
<meta name="twitter:description" content="Flowplayer Drive: Optimal quality. Always.">
<meta name="twitter:image" content="https://cdn.flowplayer.org/202777/84049-snap.jpg">
<meta name="twitter:player" content="https://flowplayer.org/standalone/multires/drive-iframe.html">
<meta name="twitter:player:width" content="1272">
<meta name="twitter:player:height" content="530">
<meta name="twitter:player:stream" content="https://cdn.flowplayer.org/202777/84049-bauhaus.mp4">
<meta name="twitter:player:stream:content_type" content="video/mp4">
 
<!-- share HLS stream on Facebook -->
<meta property="fb:app_id" content="491716327514547">
<meta property="og:url" content="https://flowplayer.org/demos/qsel/">
<meta property="og:title" content="Quality selection in Flowplayer Drive">
<meta property="og:description" content="Flowplayer Drive: Optimal quality. Always.">
<meta property="og:type" content="movie">
<meta property="og:image" content="https://cdn.flowplayer.org/202777/84049-snap.jpg">
<meta property="og:image:secure_url" content="https://cdn.flowplayer.org/202777/84049-snap.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="624">
<meta property="og:image:height" content="260">
<meta property="og:video" content="https://cdn.flowplayer.org/202777/84049-bauhaus.mp4">
<meta property="og:video:secure_url" content="https://cdn.flowplayer.org/202777/84049-bauhaus.mp4">
<meta property="og:video:type" content="video/mp4">
<meta property="og:video:width" content="624">
<meta property="og:video:height" content="260">

HTML
<div id="drive-qsel"></div>
 
<script>
flowplayer("#drive-qsel", {
clip: {
title: "Flowplayer VOD Quality Selector",
 
// VOD quality selector plugin configuration
qualities: ["160p", "260p", "530p", "800p"],
defaultQuality: "260p",
 
sources: [
// HLS for automatic quality selection
{ type: "application/x-mpegurl",
src: "//cdn.flowplayer.org/202777/84049-bauhaus.m3u8" },
 
/* manual selection */
 
// default VOD resolution in 2 formats
{ type: "video/webm",
src: "//cdn.flowplayer.org/202777/84049-bauhaus.webm" },
{ type: "video/mp4",
src: "//cdn.flowplayer.org/202777/84049-bauhaus.mp4" },
 
// default VOD resolution via RTMP for Flash in old browsers
{ type: "video/flash",
src: "mp4:202777/84049-bauhaus.mp4" }
]
},
rtmp: "rtmp://rtmp.flowplayer.org/cfx/st/",
splash: "//drive.cdn.flowplayer.org/202777/84049-snap.jpg",
ratio: 5/12,
 
// twitter share url points to page with twitter card
// and twitter player with quality selector
twitter: "https://flowplayer.org/demos/qsel/",
// facebook share url points to page with opengraph tags
// to share HLS stream
facebook: "https://flowplayer.org/demos/qsel/",
embed: {
// embed including quality selector
iframe: "//flowplayer.org/standalone/multires/drive-iframe.html"
}
});
</script>

HTML

view standalone page | quality selector outside Drive

To allow propagation of the player with quality selection and the hlsjs engine to other sites this demo offers an IFRAME embed code. The IFRAME source page loads the quality selector assets and installs the exactly same player configuration with two extra options in the global configuration for fullscreen handling.

Note that we specified width and height for the IFRAME in the embed configuration, as in conjunction with HLS the default of video width and video height is to be avoided as it depends on the first resolution loaded. Important: An additional height is configured to accomodate the vertical space for the slim timeline below the player while the controlbar is hidden, and the IFRAME source page features a CSS rule to avoid scrollbars around the embedded player.

body,
html {
/* no scrollbars */
overflow: hidden;
/* ensure that player is pinned to top left corner of the page/iframe */
margin: 0;
padding: 0;
}
#content {
/* discard site css */
margin: 0;
padding: 0;
max-width: 100%;
}

CSS
/*
additional global configuration to handle fullscreen behaviour of embedded
iframes
*/
flowplayer.conf = {
 
// allow iframe go fullscreen
fullscreen: true,
 
// iOS only allows native fullscreen from within iframes
native_fullscreen: true
};

JavaScript

view standalone page | IFRAME embedding result page