At the top of your page declare the HTML5 doctype:

<!DOCTYPE html>


This is mandatory. Otherwise HTML5 video will not work in some browsers, notably Internet Explorer 9.


Load the required assets and declare the page title - the TITLE tag is mandatory for HTML5 pages - in the HEAD section of your page:

<title>My Flowplayer video</title>
<!-- 1. skin -->
<link rel="stylesheet" href="//">
<!-- 2. jquery library - required for video tag based installs -->
<script src="//"></script>
<!-- 3. flowplayer -->
<script src="//"></script>


  • These assets are served globally from a content delivery network (Amazon CloudFront). Free for you to use.
  • You can place the files on your own servers too, maybe combine them with your existing files for faster initial load.
  • jQuery v1.7.2+ is required for VIDEO tag based installations. Make sure to load only one version of the library when integrating Flowplayer in an existing page.
  • Alternate skins are available.
  • In general it is recommended to load CSS stylesheets before JavaScript assets.
  • It is not recommended to load the Flowplayer and jQuery Javascripts in the BODY or at the end of the document.


For each player you need to prepare a html DIV element as player container inside the BODY of your page.

3 ways to install

  • automatic installation: quick, no fuss, no scripting required, and yet entirely customizable, including complete API access if the need arises
  • manual installation: install on demand, individual customization both in HTML and JSON syntax
  • pure JavaScript installation: complete and consistent control via JavaScript, no dependence on external libraries, advanced configuration and seamless API integration

2 installation categories

  • video tag based - precondition: a html VIDEO tag inside the container element on the page

    <source type="application/x-mpegurl" src="//">
    <source type="video/mp4" src="//">


  • purely JavaScript based - precondition: a JavaScript clip object in the player configuration

    clip: {
    sources: [
    { type: "application/x-mpegurl",
    src: "//" },
    { type: "video/mp4",
    src: "//" }


Video tag based

These installation methods require the jQuery library to be loaded.

Always use SOURCE tags inside the VIDEO tag and specify the video type. Flowplayer will then tweak the VIDEO tag as needed by platform or browser. Or, for the Flash engine, replace it with a Flash OBJECT.

Advantages of video tag based installations:

  • The video is represented in the page source code in a static fashion. For you, as the page creator: what you see is what you mean.
  • For many users the easiest way to get started.

Restrictions of video tag based installations:

  • Fine-tuning the configuration on the clip and source level is not possible or only in a restricted way for playlists.

Automatic installation

Flowplayer will be installed automatically into each container element for which the magic CSS class "flowplayer" is specified:

<div class="flowplayer">
<source type="application/x-mpegurl" src="//">
<source type="video/mp4" src="//">


Advantages of the automatic installation method:

Restriction of the automatic installation method:

  • will and can only be run once at page load.

The automatic method is used in the quick start guide and an example for the automatic method is shipped with each Flowplayer distribution as minimal example setup.

  • Recommendation The automatic installation method is ideal to get started with Flowplayer, and for quick no-fuss results.

view standalone page

Manual installation with jQuery

<div class="player">
<source type="application/x-mpegurl" src="//">
<source type="video/mp4" src="//">
// run script after document is ready
$(function () {
// install flowplayer into all elements with CSS class="player"


  • The player is installed using the flowplayer jQuery plugin.
  • Container elements are targeted with a jQuery selector.

Advantages of the manual method over automatic installation:

Advantage of the manual method over pure JavaScript installation:

  • jQuery allows you to select several container elements as install targets in one flowplayer call. The pure method can target only one element at a time, as it also must configure the individual video clip.
    // configuration common to all players in
    // containers with class="player" goes here

  • Recommendation The manual installation method makes it easy to fine tune the customization of individual players in a flexible fashion.

view standalone page

Pure JavaScript

This installation method uses flowplayer() as pure JavaScript function. It takes a reference to the container element as first argument, and the player configuration as mandatory second argument.

<div id="player"></div>
// select the above element as player container
var container = document.getElementById("player");
// install flowplayer into selected container
flowplayer(container, {
clip: {
sources: [
{ type: "application/x-mpegurl",
src: "//" },
{ type: "video/mp4",
src: "//" }


Because video sources are absent on the page the clip object featuring its mandatory sources property must be specified.

For convenience the container reference in the first argument can also be written in shorthand as a simple string formatted in jQuery selector syntax:

// install into container with id="#player"
// corresponding jquery selector: $("#player")
flowplayer("#player", {
// mandatory player and clip configuration goes here


  • Caveat If the first argument references an array of elements, only the first array member will be targeted. To avoid surprises make sure that you always select a single unique element as installation target.

If the jQuery library is loaded, flowplayer() can also be invoked as jQuery extension like in the VIDEO tag based installation methods with the player configuration including clip in the first argument:

// mandatory player and clip configuration goes here


  • Warning The jQuery invocation syntax is strongly discouraged for this installation method because it will not give instant access to the Flowplayer JavaScript API and blurs the structure of the code.

Advantages of the pure JavaScript installation in addition to those of the manual installation:

  • It does not depend on an external library - you may still use jQuery of course.
  • Availability of some advanced features with playlists, like subtitles or looping of individual clips.
  • The entire player functionality is controled in one place, in one language.
  • A reference to a specific player's JavaScript API can be created in one step at installation time.
  • The page will load faster because no VIDEO tag is present, especially with multiple splash setups.

Restrictions of the pure JavaScript installation:

  • Only one player can be installed per flowplayer() call.
  • By definition options set via HTML data attributes have no effect.
  • Recommendation If you want clearly structured code suited for long-term maintenance and extensibility, choose the JavaScript installation method.

Clip object

The clip object is Flowplayer's concept and understanding of video content.

The clip configuration object is the representation of a HTML5 VIDEO tag, including Flash video, in JavaScript Object Notation.

Each object in a clip's sources array is the representation of a HTML5 SOURCE tag in JavaScript Object Notation.

view standalone page

Installation summary

methodvideo tagcontainer selection methodcharacteristic
automaticyesCSS class "flowplayer"static
pure JavaScriptnoJavaScriptdynamic


The Flowplayer engines can play a slew of video formats: all videos which can be played by a HTML5 video tag or by Flash.

However, one of the main purposes of using Flowplayer is to achieve cross browser and cross device compatibility, so your videos can be viewed in all browsers and on all mobile devices. To achieve that goal, the videos must meet the these criteria:

  1. They must be correctly encoded for the purpose. See the encoding docs if you want to do this yourself - or use Flowplayer Drive.
  2. Not every format can be played in every browser or on every device. The trick is to find a combination of formats which meets the cross compatibility criterion with the least amount of fuss.

The second point will be covered in this section.

Clip and sources

clip is how we call the sum of everything related to one video content.

sources is how we call the format variants of this video, i.e., technically differing representations of the same one content.

The audience will watch one clip - the content -, but to grant an optimal viewing experience the player should be provided with several sources to choose from:

Video formats

Flowplayer supports playback of the following video formats:

formattypedelivery protocolflowplayer engine

The type column shows the source type property to be used in the configuration of sources. It is the same as the mime type the server should use for delivery of this format, except for video/flash which flags the source for the flash engine.

Discouraged format and delivery combinations are marked in red.

  • OGG format: Its video codec has a low quality/bitrate ratio because development has stalled since years. In the extremely unlikely case a legacy browser not supporting any other format is encountered, chances are that its HTML5 video implementation is still buggy and it is better to fail over to the Flash engine.
  • FLV format: By definition (Flash Video) can only be played in Flash mode. Use MP4 instead, which gives a much higher quality/bitrate ratio.
  • HTTP delivery of MP4 (or FLV) to the Flash engine: Seeking until the end of the video is not possible before the complete video is buffered (progressive download). See also the section on server side setup.


HLS stands for Apple HTTP Live Streaming, but can just as well be used for video on demand. The source is a so-called playlist with filename suffix m3u8. It can deliver multiple resolutions of a video presented via Adaptive Bit Rate and resolution streaming (ABR). HLS ABR lets your audience enjoy your content at the best quality available with the current connection speed and device capabilities. In almost all scenarios it should be the preferred source and listed first.

Flowplayer is shipped with the most complete HLS support: Out of the box it plays HLS whenever technically possible: Either if generic HTML5 playback of HLS is supported by the client or if the Flash plugin in the browser is enabled.

  • important Make sure to have a crossdomain.xml file in your media server root for Flash HLS.
  • tip The hlsjs plugin enables HLS playback in modern browsers and devices without requiring Flash. Its use is strongly recommended

Cost effective

Its streaming feature makes HLS the most server resource friendly way to deploy video: Only what the viewers see is retrieved from the server. Therefore it is also the most cost effective format: What they see, is what you pay for. No large files are downloaded in the background. And the ABR mechanism ensures not only the best quality per bandwidth, but also an optimal quality/cost ratio.

Live streaming

HLS is the only cross-device and cross-browser compatible format for live streams and live DVR. Other solutions do not cover all scenarios:

  • RTMP delivery requires Flash and does not support DVR
  • DASH requires a modern browser with MediaSource support, and for lack of the latter also does not work on iOS

Both of the above are supported by Flowplayer, but you would still need to offer HLS for cross-compatibility.

Flowplayer supports HLS everywhere:

As Flash is on the decline, we recommend to make your streams and server ready for hlsjs.

Then simply switch the player to live mode by setting the live option for player or clip to true.

HLS quality selection

Manual HLS quality selection is available out of the box via the HD menu if the stream is delivered from a root playlist pointing to several variants.

Note: Native HLS playback - for example on iOS - does not allow manual HLS level selection. This feature is available with hlsjs and Flash HLS.

By default all HLS levels are shown in the HD menu. Manual selection can be disabled or a specific set of HLS levels specified with the hlsQualities option on the global, player, and clip level.


HLS offers the best content protection in HTML5 video. Flowplayer supports encrypted HLS also in Flash - check out the demo.

Picking order

The order in which you specify the sources matters. Flowplayer will cycle through the sources and choose the first source it can play.

If a source can be played by more than one engine Flowplayer will try the html5 engine first. The main candidates for this scenario are the HLS and MP4 formats: If the browser cannot play the format and its Flash plugin is enabled, then this source will be played using the flash engine. - Exception for convenience: If HTML5 video is not supported by the browser, HLS is not on offer, but an RTMP stream, the RTMP stream takes precedence over MP4 via HTTP.

You can completely control the picking order by setting the engine source option explicitly.

This is the recommended order to provide the sources by type:

  1. application/x-mpegurl - HLS - Adaptive Bitrate Streaming allows optimal quality according to bandwidth and device compatibility; reduces Content Delivery Network costs as some browsers will keep downloading a video file even while playback is paused
  2. video/webm - WebM - before MP4 because otherwise it won't be chosen.
  3. video/mp4 - also required as Flash fallback if neither HLS nor an RTMP stream is available; for mobile device compatibility refer to our encoding documentation
  4. video/flash - MP4 over RTMP if HLS is not available - allows random seeking if html5 video is not available
  • Important Engine plugins like hlsjs or dashjs are usually inserted at the top of the above order and will take precedence.


This section covers how the player is presented on the page before playback starts.

Player size

The size of the player is determined by the dimensions of the container element. For example you can hard code them using CSS directives:

.flowplayer {
width: 600px;
height: 338px;


However, hard coding width and height of the container element foregoes Flowplayer's responsive design: If you do not specify fixed dimensions for the container like above, the player will adapt itself to the dimensions of the parent element according to its ratio setting (see below) - very useful to make the player look good on small mobile screens for example. Therefore it is recommended to either just omit dimension directives, or you can use more flexible CSS rules like max-width and/or max-height:

.flowplayer {
max-width: 800px;


By default Flowplayer uses all the width that is given via CSS or the width of the container's parent element. The height of the player is determined by the aspectRatio or ratio configuration settings which default to "16:9" or 9/16 respectively. Under the premise that letterboxing or empty sidebars on the video screen are to be avoided, this assumes a video of 16/9 aspect ratio. Note that the ratio notation is the inverse ratio of how one usually specifies the aspect ratio of a video: height/width (container) as opposed to width/height (video).

You can change the ratio in the global player configuration:

flowplayer.conf.aspectRatio = "4:3";


This is the same as:

flowplayer.conf.ratio = 3/4;


Or you can set the ratio in the HTML configuration using the data-aspect-ratio or data-ratio attribute of the container element as follows:

<div class="flowplayer" data-aspect-ratio="4:3">


This is the same as:

<div class="flowplayer" data-ratio="0.75">


You may round a floating point value, but you should should not go below a precision of 4 decimals.

Here are the player ratio values for some widely used video aspect ratios:

aspect ratioorientationfraction ratiofloat ratiomandatory

Alternatively you can change the container's ratio via CSS while setting the ratio option to false:

.flowplayer .fp-ratio {
padding-top 41.67%


Now when you resize the browser the video size will adjust accordingly, and the player's width/height ratio is kept.

You may also let the player size dynamically be determined by the video's aspect ratio: Set the adaptiveRatio player option to true.

This comes in handy for quick setups when you do not happen to know the exact dimensions of the video, but still want the player's screen size to match the aspect ratio of the video. By consequence refrain from configuring adaptiveRatio for a splash setup as the video's dimensions - and therefore its aspect ratio are only available once the video is loaded and the player is ready.

Start screen

In a basic setup like the one in our quick start guide the video is loaded and the first frame is shown - unless autoplay is configured.

In most cases however, you want to customize the initial screen as what is often called a splash or poster screen. Flowplayer offers two techniques to implement a start screen which are also named "poster" and "splash".

Common features of "poster" and "splash":

  • The visible result: the player area is filled with an image or coloring, and in the middle sits the play button to advertise a video player and invite the audience to play the video.
  • The implementation method: entirely via CSS, background-image or a background-color or both, as directives for the container element - not mandatory for "splash" because it also changes the initial player behaviour, see below.

Where "poster" and "splash" differ is their behaviour:

  • poster: the video is loaded in the background
  • splash: the video is loaded on demand, i.e. when the user starts playback with a click
  • Important A splash or poster setup is mandatory if the player is hidden at some point in its life cycle. Some browsers forbid hiding the Flash object, and thus errors are encountered when the flash engine is in use. This notably concerns modal window setups.


The poster setup is recommended when you want to preload the video at startup while giving the player a custom look and feel.

Flowplayer features an extended and flexible concept of the generic poster VIDEO tag attribute: If the poster attribute is given, it will also be used as CSS background image of the container element. Par consequence you can also choose to omit the poster attribute, and instead specify a background image or background color (treated as monochrome "poster") CSS directive to the same effect.

The advantages of this approach:

  1. works consistently in Flash and HTML5
  2. does not break when browser is resized (very hard to do in Flash)
  3. you can take advantage of CSS techniques such as positioning, animations, scaling and many more
  4. you can use CSS sprites and thereby avoid multiple server calls
  5. you get rid of browser issues, for example Internet Explorer 9 loads the first frame of the video on top of the poster image
  6. you can use higher resolution images with Retina and similar devices

To sum up, a poster setup requires that

  • a background-image or background-color CSS rule applies to the container element or
  • the poster configuration option is set or
  • the VIDEO tag carries a poster attribute and
  • the splash setup is not enforced.

If both background-image for the container and poster attribute for the VIDEO tag are given, the poster image takes precedence and replaces the background image.

When the above conditions are met, the CSS "is-poster" state class is assigned to the container at startup. For instance this allows you to create a loading animation for the entire player area with a few CSS rules.

view standalone page


Flowplayer has a unique feature called "splash screen" which is similar to the poster setup except that the nested VIDEO or Flash OBJECT tag initially is not present on the page, but is inserted on demand. The player is installed on the fly when the user clicks on the splash screen. This has the following benefits:

  1. You can have an unlimited amount of players on the page and they - or rather their splash screens - all render immediately, even in Flash mode.
  2. There are no hidden Flash objects which interfere with your scripting or CSS layout dynamics.
  3. Only one video can be played at a time. When the user clicks on a splash screen while another player instance is running, the latter is unloaded automatically.

By design the splash setup also disables preloading of the video.

Please have a look at the poster and splash comparison page.


To set up splash screens you either add the state class "is-splash" to the CSS class of the container element:

<div class="flowplayer is-splash"
style="background-color:#777; background-image:url(/path/to/splash.jpg);">
<source type="application/x-mpegurl" src="//">
<source type="video/mp4" src="//">


Or you configure the addition of the "is-splash" state class by setting the splash option to true or to the location of the splash image. For instance this global configuration applies the splash setup to all players on the page:

flowplayer.conf = {
splash: true


The splash image is given in the CSS background-image directive for the container element or by setting the splash option to the location of the image. However, providing an image is not mandatory to set up a Flowplayer splash screen; in fact there is no CSS or image requirement for the splash setup. Usually you want at least a background-color to discern the player from its surroundings.

Here is how it works:

  • Video tag based installations: Upon recognition of the "is-splash" class name or the splash option the VIDEO tag is temporarily removed from the container element on page load.
  • When the splash screen is clicked the VIDEO or an OBJECT tag, depending on the engine picked, is placed inside the player container and the "is-splash" CSS class name is removed.
  • Unloading does the opposite: the VIDEO or OBJECT tag is removed and the "is-splash" class is re-added.
  • The player can be made to go back to splash state by hitting the q key or by calling the unload API method.
  • Adding the "is-closeable" state class displays an unload button.

Splash screens are used heavily in our demo area. They are one of the main reasons why people use Flowplayer.

  • Tip The cleanest and fastest way to implement a splash setup is to use a pure JavaScript installation, and, if desired, to set the splash image via CSS.

view standalone page


The player supports various configuration options. For example:

// option 1
ratio: 3/4,
// option 2
rtmp: 'rtmp://'


Configuration happens on 3 levels:

  1. player level: options which affect the player
  2. clip level: options which set or affect the video
  3. source level: options which set or affect source variants of the clip

JavaScript schema:

var conf = {
// player level
clip: {
// clip level
sources: [
// source level


HTML schema:

<div id="playerContainer" data-[option]="value" ...> <!-- player level -->
<video> <!-- clip level -->
<source ...> <!-- source level -->


  • Important The HTML schema is less clear cut and sometimes less flexible at the clip and source level. We recommend to use the JavaScript installation method for complex setups.

The following tables show all options as they are declared in a global, local or pure JavaScript configuration in JSON syntax.

Options marked in red are advanced options. Only set them when you know what you are doing and aware of potential side-effects or drawbacks.

Player options

Here is a list of all core configuration options at player level.

For video tag based installations every player option can alternatively be specified in HTML configuration syntax as custom data-attribute of the container element - except for clip which is set via the VIDEO and SOURCE tags and rtmp if specified as Object. Camel cased option names like adaptiveRatio must be written as compound lower cased attributes: data-adaptive-ratio.

optiondefault valuedescription
adaptiveRatiofalseWhether the player's ratio adapts vertically to the video's aspect ratio. Do not apply in conjunction with the aspectRatio or ratio options.
aspectRatio'16:9'A string specifying the aspect ratio of the player, width to height. Usually should be set to the value as the video's aspect ratio. Both colon : and slash / separators are allowed.
Refer to the section on player size for further details.
See also the ratio option.
autoplayfalseIf true, playback will start automatically once the player is loaded.
Contradicts a splash setup by definition and must not be used with it.
Has no effect on mobile devices which do not allow automatic playback.
bgcolor'#333333'The background color (hex value) of the player canvas in Flash mode unless the wmode option is not set to "transparent". If a CSS background-color rule is specified for the container, its calculated full hex value becomes the default, so you usually want to configure this via CSS.
clipObjectConfiguration of the video to be loaded in a pure JavaScript installation. Refer to clip options for parameters and detailed descriptions.
Not allowed in a VIDEO tag based installation.
debugfalseWhether to show debug messages in the browser console. Causes errors if window.console is not available.
disabledfalseWhether playback should be forced by disabling the UI. Seeking, pausing etc. is impossible. API still works. Typically used in ads.
errorsArrayAn array of error messages. The default list can be found in the API documentation.
fullscreentrueWhether fullscreen is enabled. Defaults to false when the player is viewed in an IFRAME.
hlsQualitiestrueIf false, disables manual HLS quality selection. levels. Shorthand for an array comprising all level index numbers.
Can be set as data-hls-qualities HTML attribute.
hlsQualitiesArrayAn array of HLS levels to offer for manual HLS quality selection. The levels are specified as index numbers from 0 (lowest) to highest. Level `-1` for adaptive bitrate switching must be listed first. Example:
[-1, 1, 6]
Can be set as data-hls-qualities HTML attribute.
Levels may also be specified with a custom selector menu label:
[{level: -1, label: "ABR"},
{level: 1, label: "SD"}, {level: 6, label: "HD"}]

In this case hlsQualities cannot be set as HTML data attribute.
hlsQualities'drive'For videos from Flowplayer Drive created with the Adaptive or Premium profile: If set to "drive", enables manual HLS quality selection of a selected range of up to 4 resolutions (demo).
Can be set as data-hls-qualities HTML attribute.
keyboardtrueWhether keyboard shortcuts are enabled.
livefalseWhether the player is set up for live streaming.
CSS alternative: the is-live state class.
See also the corresponding clip option.
mouseoutTimeout5000How long the full controlbar stays visible in fullscreen after a mouse movement (in milliseconds).
Has no effect in conjunction with the fixed-controls and no-toggle skin modifier classes.
mutedfalseWhether the player should start in muted state.
native_fullscreenfalseWhether to use native fullscreen in mobile browsers instead of the full browser window. The screen will be bigger but native video controls will be in use instead of customizable Flowplayer controls.
posterURL or path to poster image. Enables a poster setup.
Caveat: Setting the poster via this option is slow, because the poster image can only be shown once the player is loaded.
If a CSS poster setup is detected on boot, the API sets this option to true.
ratio9 / 16A fraction or decimal number representing the height of the player in proportion to its width. Refer to the section on player size for details.
See also the aspectRatio option.
Set this to false if you want to set the ratio via CSS only or set the player dimensions to a fixed size via CSS.
rtmpObjectFlash (RTMP) only. When specified in JavaScript object notation: the rtmp configuration object.
rtmpFlash (RTMP) only. When specified as String: Address of the Flash RTMP server. Mandatory when a Flash video source is delivered via RTMP.
Shorthand for the url option in the rtmp configuration object.
speeds[0.25, 0.5,
1.0, 1.5, 2.0]
The available speed levels that are used with SHIFT + arrow keys or by the speed() API method. The values in the given array are the factors by which normal playback speed is multiplied.
Values less than 1.0: slow motion.
Values greater than 1.0: fast forward.
Not supported by the Flash engine, older browsers and many mobile devices.
swfFlash only. Location of the Flash file. URL or path. Defaults to
for the free player.
swfHlsFlash only. Location of the Flash HLS plugin. URL or path. Defaults to
for the free player.
Setting this to false will prevent playback of HLS by the Flash engine altogether.
splashfalseAs boolean: enables a splash setup. If a splash image is desired, it can be set as CSS background-image for the container element.
CSS alternative: the is-splash state class.
splashAs string: The location of the splash image. Enables a splash setup.
volume1.0The initial volume level.
wmode'opaque'The wmode value to be used by the Flash engine. Refer to the Adobe Flash documentation for more info.
Warning: Setting this to "direct" or "window" will cause problems in some browsers, namely Internet Explorer and Firefox on Windows.

Extension and plugin options

The following options are undefined by default, but are supported by player extensions or additionally loaded plugins. Follow the link in the third column for details. The rightmost column indicates whether the option can also be set as data attribute in a HTML configuration. Some of the options accept a nested configuration object as value, in which case only the top-level option is listed here.

optionkindextension/pluginhtml configurable
activeStringPlaylist extensionyes
advanceBooleanPlaylist extensionyes
analyticsStringAnalytics extensionyes
audioBooleanAudio pluginyes
audioOnlyBooleanAudio pluginyes
backgroundBooleanBackground pluginyes
backgroundObjectBackground pluginno
coverImageStringAudio pluginyes
cuepointsArrayCuepoints extensionrestricted
dashObjectdashjs pluginno
defaultQualityStringVOD quality selector pluginyes
embedBooleanSharing extensionyes
embedObjectSharing extensionno
facebookBooleanSharing extensionyes
facebookStringSharing extensionyes
generate_cuepointsBooleanCuepoints extensionyes
hlsjsBooleanhlsjs pluginyes
hlsjsObjecthlsjs pluginno
imaObjectAdSense pluginno
imaObjectVAST pluginno
keyStringCommercial extensionyes
logoStringCommercial extensionyes
loopBooleanPlaylist extensionyes
nativesubtitlesBooleanSubtitle extensionyes
overlayStringOverlay pluginyes
overlayObjectOverlay pluginno
playlistArrayPlaylist extensionno
qualitiesArrayVOD quality selector pluginno
qualitiesStringVOD quality selector pluginyes
queryStringPlaylist extensionyes
shareBooleanSharing extensionyes
thumbnailsObjectthumbnails pluginno
twitterBooleanSharing extensionyes
twitterStringSharing extensionyes

Commercial configuration

The commercial version allows you to get rid of the Flowplayer logo and optionally use your own. By default this will be displayed in the bottom/left corner of the player in the shared players. When a user clicks the logo [s]he will be redirected to the originating page.

The license key is tied to the domain name shown in the browser's location bar - in the case of iframes when the frame is viewed in its own window, i.e., the iframe source domain.

Commercial prerequisites

Make sure to deploy and load the commercial release available at your Flowplayer account, or simply load the commercial API script from //

The following assets must be commercial for license validation:

  • the API script: flowplayer.min.js
  • the Flash swf file: flowplayer.swf - if not loaded from our CDN (the default) the swf option or the data-swf container attribute must be set
  • the Flash HLS swf file: flowplayerhls.swf - if not loaded from our CDN (the default) the swfHls option or the data-swf-hls container attribute must be set

Commercial options

Here are the player options for the commercial version:

keyA valid license key removes the Flowplayer branding from the player. The value can be a comma separated string of keys to support multiple domains. For example:
'$688345122773207, $334773811075656'
logoLocation of your logo. URL or path.
Clicking on the logo will redirect the viewer to the originating page.
Both the visibility and positional default can be customized via CSS.
swfFlash only. Location of the Flash file. URL or path. Defaults to
swfHlsFlash only. Location of the Flash HLS plugin. URL or path. Defaults to
Setting this to false will prevent playback of HLS by the Flash engine altogether.

Here is a minimal commercial setup. Take a look at its source code and you can see how the key is provided. You create the key on your account page after purchase by entering the domain name you wish to license into the "Add domain" field.

Custom context menu

The context menu which shows up on right-click on the player area can be customized in licensed players. Refer to the skinning documentation for how to set it up.

By default no context menu is present in the commercial player.

Clip options

The clip object may not be empty. As any HTML5 player, Flowplayer requires a video to run. Therefore specifying a sources parameter is mandatory for a valid clip configuration.

In a VIDEO tag based installation the sources are already present as SOURCE tags.

optiondefaulthtml syntax description
flashlsObjectFlash (HLS) only. The flashls object may be used to fine tune the behaviour of Flash HLS.
Cannot be set in HTML syntax.
hlsQualitiestruedata-hls-qualitiesOverrides the hlsQualities player configuration for this clip, turning manual HLS level selection on or off.
loopfalseloopWhether this clip should play again automatically on finish.
For loop playback of playlists use the loop option at player level provided by the playlist extension.
livefalsedata-liveWhether this clip is a live stream.
Overrides the live player option.
rtmpObjectFlash (RTMP) only. When specified in JavaScript object notation: the rtmp object.
Overrides the rtmp player option.
Cannot be set in HTML syntax.
rtmpdata-rtmpFlash (RTMP) only. When specified as String: Address of the Flash RTMP server. See also: server side video handling.
Overrides the rtmp player option.
sourcesArraySOURCE tagsA list of video formats. Refer to source options for parameters and detailed descriptions.
Setting this property is mandatory.
titledata-titleSet a title for this clip. Displayed in a top bar when hovering over the player.
Caveat: Has no visible effect in conjunction with the aside-time skin modifier class.

Extension and plugin clip options

These options are undefined by default but are supported by the referenced extensions or plugins, especially for use in playlists.

The rightmost column indicates whether the option can also be set as data attribute in a VIDEO tag based playlist installation as custom data-attribute of a playlist "trigger" element.

optionkindextension/pluginhtml configurable
audioBooleanAudio pluginyes
coverImageStringAudio pluginyes
cuepointsArrayCuepoints extensionrestricted
dashObjectdashjs pluginno
defaultQualityStringVOD quality selector pluginyes
hlsjsBouleanhlsjs pluginyes
hlsjsObjecthlsjs pluginno
hlsQualitiesArrayhlsjs pluginyes
hlsQualitiesBooleanhlsjs pluginyes
imaObjectAdSense pluginno
imaObjectVAST pluginno
qualitiesArrayVOD quality selector pluginno
qualitiesStringVOD quality selector pluginyes
subtitlesArraySubtitle extensionno
thumbnailsObjectthumbnails pluginno

Source options

optionmandatory html syntax description
enginenodata-engineThe engine the player must use for this source, no other engine will be tested. If the source cannot be played by the specified engine or the engine is not supported by the browser, the next source will be tried.
Makes picking order completely customizeable.
typeyestypeThe video type of this source.
srcyessrcThe location of this source. Path or URL.

Video tag attributes

In VIDEO tag based installations you can apply the following standard html5 VIDEO tag attributes:

attributekindlevel description
autoplaybooleanplayerIf set, playback will start automatically once the player is loaded - demo. Same effect as the player option of the same name.
Has no effect on mobile devices which do not allow automatic playback.
loopbooleanclipIf set, the video plays again automatically on finish. Corresponds to the JavaScript clip option of the same name.
Cannot be used with playlists.
posterStringplayerURL or path to poster image.
  • Warning Do not use any other standard VIDEO tag attributes as they might cause conflicting or unpredictable behaviour.

Global JavaScript configuration

Here we provide global settings for all players on the page:

<script src="//"></script>
<!-- global options -->
flowplayer.conf = {
ratio: 5/12,
splash: true,
analytics: "UA-27182341-1"


The flowplayer.conf object sets the global configuration for Flowplayer. You should customize its properties right after Flowplayer has been included in the HEAD section of your page (with script src). Another common place to put site-wide Flowplayer defaults is in an external javascript file which contains the website logic and is loaded after the basic assets. This is a practical way to specify global settings such as the Google Analytics ID.

Each player will have these as defaults but they can be overridden for individual players.

You can set individual options as follows:

<script src="//"></script>
flowplayer.conf.ratio = 5/12;


Remember to set these after the flowplayer.conf = {...} setting if you have one because setting the entire conf object will discard any individual property settings. Or use the flowplayer.set function which allows to extend an existing global configuration.

Local JavaScript configuration

The scope of both the pure JavaScript installation and manual installation methods is local. Player specific configuration is passed as argument to the flowplayer() function.

Here is an example how to configure the ratio option for all players which are manually installed into containers of class "player".

// install player manually after DOM is ready
$(function() {
// install into all elements with class="player"
// video dimensions: 470px / 250px
aspectRatio: "47:25",
rtmp: "rtmp://"


The configuration is normally passed as in JavaScript Object Notation as argument to the flowplayer() call. If the argument is a simple string it is treated as the location of the flowplayer swf file.

Local configuration overrides global configuration.

view standalone page

HTML configuration

Configuration options for specific players can also be set directly in HTML syntax:

<div data-aspect-ratio="47:25" data-rtmp="rtmp://"
class="flowplayer no-volume">
<video autoplay>
<source type="video/webm"
<source type="video/mp4"
<source type="video/flash"


The HTML syntax allows to customize specific players even when they are automatically installed.

HTML configuration overrides global configuration and local JavaScript configuration.

view standalone page

Order of precedence

The above override rules result in this order of precedence regarding the possibilities to configure the player:

  1. HTML configuration
  2. local JavaScript configuration
  3. global JavaScript configuration

Configuration summary

Here is an overwiew of the ways to configure Flowplayer mapped to their respective coding, level, and installation method.

● = mandatory   + = accepted   − = not possible

DIV data-attrHTMLplayer+
flowplayer(DIV, {
VIDEO attrHTMLmixed++
SOURCE attrHTMLsource● type
● src
● type
● src

sel = jQuery selector DIV = container element

attr = element attribute conf = JSON option: value mapping index = array index


Flowplayer not only offers a graphical interface. It can also be controled via the keyboard. Here is an overview of the available keyboard shortcuts:

qstop | unload (in a splash setup)
shift + left arrowslower (see the speeds option)
shift + right arrowfaster (see the speeds option)
down arrowvolume down
up arrowvolume up
left arrowseek backward
right arrowseek forward
.seek to previous position
numberseek to numbertimes 10 percent of duration

Keyboard shortcuts can be turned off by setting the keyboard configuration option to false.


For players shown in an IFRAME fullscreen is disabled by default. It would not work in browsers without native fullscreen support, and some browsers forbid fullscreen from IFRAMEs, notably from a remote orgin, without offering a reliable detection mechanism.

If you are in control of the IFRAME's source and the page where the IFRAME is shown you can allow fullscreen by excplicitly setting the fullscreen configuration option to true on the originating page and specifying the allowfullscreen attributes for the IFRAME:

<iframe src="//"
width="800" height="500"


To allow fullscreen playback from within an IFRAME on iPad, additionally the native_fullscreen option must be set to true.

Check out the iframe demo.


Flowplayer is shipped with two engines: html5 and flash.

Additional engines can be added as plugins for advanced purposes like MPEG DASH playback.

html5 engine

The primary engine is the html5 engine, unless you configured a different engine for a specific source explicitly.

HTML5 video

Generic HTML5 video support introduced by major desktop browser versions:

Internet Explorer-9.0-13.0 Edge
  • Important Native HLS playback support in Internet Explorer Edge is very buggy, using the hlsjs plugin is strongly recommended.

Safari on Windows is capable to play HTML5 video if QuickTime is installed.

HTML5 video format support on mobiles:

  • MP4: all devices
  • HLS: iOS and most modern other devices

Check out this dynamic table which shows what formats your current browser can play.

Flash engine

The Flash engine is chosen to play a source if

  1. the tested video source cannot be played as HTML5 video by the browser and
  2. the tested video type can be played by the Flash engine and
  3. the engine source option for this source is not set to a value other than "flash" and
  4. the Flash plugin is enabled in the browser

or if

  1. the engine source option for this source is set to "flash" and
  2. the Flash plugin is enabled in the browser

The Flowplayer Flash component requires Flash version 9.0.0. Flash supports playback of the MP4 format since version 9.0.115. Consider it safe to neglect offering a FLV source as fallback for ancient Flash.

The Flash engine supports playback of the following video formats:

Flash HLS

  • Important The hlsjs plugin enables HLS playback in modern browsers and devices without requiring Flash. Compared to Flash HLS it features better playback performance and is more resource friendly. - Flash HLS will still be used in legacy browsers.

Flowplayer supports HLS playback with its Flash engine. Adaptive Bit Rate (ABR) switching is available not only in browsers which can play HLS in HTML5 video, but also in all other browsers, noteably most desktop browsers.

For live streams this means that the same range of clients can be reached with just one source of type application/x-mpegurl as with a combination of HLS for HTML5 video and RTMP for Flash (where RTMP does not offer the benefits of ABR).

Advantages of Flash HLS over RTMP:

  • ABR is available
  • no additonal Flash source required
  • no RTMP server required to offer random seeking via the Flash engine

Rare scenarios where RTMP delivery for Flash might be preferrable:

  • live streams where synchronicity with the live event is of crucial importance; live stream delivery often is done over RTMP first, which then has to be transformed to HLS causing a slight delay
  • very fine seeking granularity is of crucial importance to the setup - reason: Flash HLS seeks only to keyframe positions by default and setting flashls seekmode: "ACCURATE" doesn't yield the desired experience. - Even in this scenario RTMP should only be 3rd choice after HLS via the hlsjs plugin and generic playback.

Flash video (RTMP)

Flowplayer supports a special video/flash source type to target video specifically for Flash. The type is mostly and best used to offer an RTMP stream as Flash source if a HLS stream is not available:

<!-- flowplayer with RTMP configuration option -->
<div class="flowplayer" data-rtmp="rtmp://">
<!-- consumed by the html5 engine -->
<source type="video/webm" src="//">
<source type="video/mp4" src="//">
<!-- consumed by the flash engine -->
<source type="video/flash" src="mp4:path/to/video.mp4">


RTMP delivery in Flash allows seeking to unbuffered positions in the timeline.


  • The rtmp option for the server address - also called 'net connection url' - must be set. Please consult the documentation of your server for its exact value.
  • The src must be the path on the server, not a full URL. For video on demand it is often prefixed with mp4: for MP4 videos. Again the server documentation is your friend.

Specifying a video/flash source delivered via HTTP for progressive download is rarely useful:

  • If the video is in MP4 format, the source of type video/mp4 will be be automatically chosen as Flash fallback format if no HLS or RTMP source is available.
  • The FLV format has a lower quality/bitrate ratio compared to MP4 and cannot be played in HTML5 video.

Server side

Mime types

Make sure that all the files are available on the server and that the server transmits them with the correct Content-Type. Depending on your server you might have to extend the .htaccess or mime.types files (Apache), use the IIS manager (Internet Information Server) or set the header via Metadata (Amazon S3). Example .htaccess file:

AddType video/mp4             .mp4
AddType video/webm .webm
AddType video/ogg .ogv
AddType application/x-mpegurl .m3u8
# hls transport stream segments:
AddType video/mp2t .ts
# subtitle text tracks:
AddType text/vtt .vtt


The first 4 mime types above are also the ones most commonly used source types.


When loading the Flowplayer assets make sure to avoid mixed content if your page is accessed via HTTPS.

The easiest and most flexible way to achieve this is by omitting the protocol:

<!-- omit protocol when loading assets -->
<link rel="stylesheet" src="//">
<!-- ... -->
<script src="//"></script>


The same applies to loading the video sources:

// omit protocol when loading sources
sources: [
{ type: "application/x-mpegurl",
src: "//" },
{ type: "video/mp4",
src: "//" }



<!-- omit protocol when loading sources -->
<source type="application/x-mpegurl" src="//">
<source type="video/mp4" src="//">


This obviously requires that is accessible both via HTTPS and HTTP. Otherwise use the same protocol as the page is served with or a local path - but also read the notes on sharing.

Cross domain

To make HLS work in Flash Flowplayer's Flash engine must have explicit permission to access the transport streams. The deployment of a a cross domain policy file at the root of the domain from which the TS files are served is obligatory. It must allow requests from the location of flowplayerhls.swf (see the swfHls configuration option).

Simple example of a crossdomain.xml file giving full access to requests from anywhere:

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM
<allow-access-from domain="*" />


Refer to the Adobe Flash documentation for a full specification.

  • Important With Flash HLS it is especially important to load the Flowplayer assets (flowplayerhls.swf) and the media via the same protocol.


Avoid redirects in the video source URLs. Some browsers may not be able to handle them in HTML5 video.

Flash HLS does not allow for 302 redirecting of relative paths in the master variant HLS playlist.

Random seeking

Audiences expect to be able to skip back and forth in a video without inconvenience. They expect a "streamed" video. With HTML5 video the server side requirements are now lowered dramatically for offering this feature.

  1. HLS is genuinely made to order for this purpose. As Flowplayer's Flash engine plays HLS out of the box, most scenarios are covered, adaptive bitrate streaming included. It is also the most cost effective format.
  2. Almost all modern HTTP servers support byte-range requests. Thus they fulfill the only requirement to "stream" HTML5 video on demand as it can be viewed in partial downloads.
  3. Flash is only capable of progressive download over HTTP. If you cannot offer a HLS stream, consider serving from an RTMP server for Flash delivery. You do not necessarily have to run your own RTMP server for this purpose. Most content delivery networks (CDNs) offer this alternative and other advantages, see below.
  4. Note on MP4 metadata: make sure the MOOV atom is at the beginning of the file, or some browsers will not start playback before downlaoding the full file.


In the interest of your audience, and to lower your worries regarding maintenance, reliability, and delivery speed, consider serving your videos from a content delivery network. The videos will be served from edge locations near your viewers, which can result in a noticeable speed gain, resulting in improved playback quality.

Advanced Flash configuration

The options listed in the following sections should only be applied if needed, and with knowledge regarding their effects.


For finer control of Flash HLS the following options are available as properties of the flashls configuration object on the clip level:

capleveltostagefalseWhether levels are limited the stage (screen) dimensions.
false: levels will not be limited. All available levels could be used taking only bandwidth into consideration.
true: level width and height (defined in m3u8 playlist) will be compared with the player width and height. Max level will be set depending on the maxlevelcappingmode option.
debugfalseIf true Flash HLS debug messages are shown in the JavaScript console.
debug2falseIf true Flash HLS verbose debug messages are shown in the JavaScript console.
fragmentloadmaxretry4Maximum number of fragment load retries after I/O error.
Any I/O error will trigger retries every 1s, 2s, 4s, 8s (exponential, capped at 64s).
-1 means infinite retries.
0 means no retry, a "Video not found" error will be raised instantly.
fragmentloadskipaftermaxretrytrueControls behaviour in case fragment load still fails after max retry timeout.
true: fragment will be skipped and next one will be loaded.
false: "Video file not found" error will be raised.
keyloadmaxretry-1Maximum number of AES encryption key load retries after I/O error.
Any I/O error will trigger retries every 1s, 2s, 4s, 8s (exponential, capped at 64s).
-1 means infinite retries.
0 means no retry, an error will be raised instantly.
live_flushurlcachefalseIf set to true a live playlist will be flushed from URL cache before reloading. Use only for testing!
lowbufferlength3Low buffer threshold in seconds. When crossing down this threshold, the player goes into loading state. Playback will still continue.
manifestloadmaxretry-1Maximum number of manifest (m3u8 playlist) load retries after I/O error.
If any I/O error is encountered during initial manifest load, a "Video not found" error will be raised immediately. After the initial load, any I/O error will trigger retries every 1s, 2s, 4s, 8s (exponential, capped at 64s).
-1 means infinite retries.
0 means no retry, an error will be raised instantly.
maxbackbufferlength30Maximum back buffer length in seconds. 0 means infinite back buffering. The back buffer is seekable without redownloading segments.
maxbufferlength300Maximum buffer length in seconds. 0 means infinite buffering.
maxlevelcappingmode"downscale"Defines the max level capping mode:
"downscale": max capped level should be the one with the dimensions equal or greater than the screen dimensions.
"upscale": max capped level should be the one with the dimensions equal or lower than the screen dimensions.
minbufferlength-1Minimum buffer length in seconds that needs to be reached before playback can start after seeking, or restart in case of empty buffer.
By default -1 some heuristics based on past metrics are used to define an accurate value that should prevent buffer stalling.
seekfromlevel-1-1: automatic seek level selection, keep level before seek.
From 0 to 1: indicates the "normalized" preferred bit rate:
0: lowest (non-audio) bit rate is used.
1: highest bit rate is used.
0.5: nearest to middle bitrate will be selected and used first.
startfrombitrate-1If greater than 0, specifies the preferred bitrate to start with.
If -1 (default), and startfromlevel is not specified, automatic start level selection will be used.
Otherwise overrides startfromlevel.
startfromlevel-1-1: automatic start level selection, playback will start from level matching download bandwidth (determined from download of first segment).
-2: playback will start from the first level appearing in the variant manifest (regardless of its bit rate) - similar to generic HLS starting behaviour.
From 0 to 1: indicates the "normalized" preferred bit rate:
0: lowest (non-audio) bit rate is used.
1: highest bit rate is used.
0.5: nearest to middle bitrate will be selected and used first.
seekmode"KEYFRAME""KEYFRAME": seek to last key frame before requested position.
"ACCURATE": seek to exact position. Caveat: might cause jumping of video on resume after seek.
usehardwarevideodecodertrueWhether hardware video decoding is enbabled. Only set to false to check for potential hardware decoding issues.
  • Important The flashls configuration does not influence the behaviour of generic HTML5 video HLS playback.

RTMP options

To fine tune RTMP server settings the rtmp option can be specfied in JavaScript object notation. The rtmp object accepts the following properties:

bufferTime3Specifies how long to buffer messages before starting to display the stream. See Adobe's docs for NetStream.bufferTime for more info.
In a live configuration the default value is 0 as recommended by Adobe; changing the value might cause problems with resuming live streams.
proxybestDetermines which fallback methods are tried if an initial connection attempt to the RTMP server fails. See the Adobe documentation for details.
rtmpttrueTry an RTMP connection through HTTP tunneling. The one that connects first will be used in playback. Set this to false if you want to disable RTMPT.
subscribefalseSome live streams require this to be set to true. Check with your stream provider or CDN whether their server sends the FCSubscribe netConnection event.
urlAddress of the Flash RTMP server.
Mandatory, corresponds to rtmp given as string.

Both forms of the rtmp option can be given at player and clip level.

Migration from Version 6

Manual HLS quality selection is now available out of the box via the builtin HD menu.

Discover the revamped skinning and sharing possibilies.

Migration from Version 5

A lot of effort went into keeping the player compatible with existing setups. If you still encounter problems, please check also the migration notes in the skinning and api doc sections and turn to our forum for support.

Installation of a playlist of sources into an empty container element has grown up to become a first class citizen in the form of the API friendly JavaScript installation method in Flowplayer 6 with an extensible clip object. We recommend to embrace the more flexible full syntax which will give you even more control over each clip and its sources.

Flowplayer 6 introduces a simpler source picking order: Every source will be tried in the given order by all engines available. In the usual recommended setups this will not cause any difference in behaviour.

In the same vein, the engine option has moved from the player level to the source level to allow for complete fine-grained control of video source preferences.

Users of advanced RTMP options like bufferTime, rtmpt: The options will currently still work when set at player level directly. We recommend to start upgrading to the new rtmp configuration object which is available both at player and clip level and thereby offers increased flexibility.