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