Empty container

v5.4 With the manual installation method you can install the player with JavaScript only without providing a HTML video tag on your page. Simply specify the video sources as item(s) of the playlist configuration:

$(function () { // ensure DOM is ready
 
   // this will install flowplayer into an element with id="player"
   $("#player").flowplayer({
      // one video: a one-member playlist
      playlist: [
         // a list of type-url mappings in picking order
         [
            { mp4:  "http://mydomain.org/video.mp4" },
            { webm: "http://mydomain.org/video.webm" },
            { ogg:  "http://mydomain.org/video.ogv" }
         ]
      ],
      ratio: 3/4 // video with 4:3 aspect ratio
   });
 
});

You can put the above incantation anywhere on your page, also in the HEAD section - after loading jQuery and the flowplayer script. jQuery ensures that the document is ready for the player installation. Then all you need on your page is this:

<!-- empty container element with unique id="player" -->
<div id="player"></div>

Summary

There are two ways to initialize Flowplayer

1. automatic: in which case you supply a class name "flowplayer" for the player element and Flowplayer consumes the global configuration and data- attributes.
2. manual: in which case you supply any other class name than "flowplayer" and provide the configuration yourself in JSON format like this:

   $(".my-custom-player-container").flowplayer({ engine: 'flash' });
   

   
   

Video size

The size of the video fits the container element's dimensions. For example:

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

Using hard coded width and height is not recommended since the player size is fixed no matter what the screen size is. Flowplayer is designed in such a way that it will adjust itself to various screen sizes.

By default Flowplayer uses all the width that it is given, and the height of the player is determined by the ratio configuration setting which defaults to 9/16. This assumes a video of 16/9 aspect ratio. Note how the 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 player configuration:

flowplayer.conf.ratio = 3/4;

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

<div class="player" data-ratio="0.417">
   <video>...</video>
</div>

The default value of data-ratio is "0.5625", i.e. the default ratio of 9/16.

Alternatively you can change the container's ratio via CSS:

.flowplayer .fp-ratio {
   padding-top 41.7%
}

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

Poster

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

Since v5.2 Flowplayer features an extended and flexible concept of the 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 IE9 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 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. This allows you for instance to create a loading animation for the entire player area with a few CSS rules, like in this example poster setup.

Splash

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 name "is-splash" to the CSS class of the container element:

<div class="flowplayer is-splash"
     style="background:#777 url(/path/to/splash.jpg) no-repeat;">
   <video preload="none">
      <source type="video/mp4" src="/path/to/intro.mp4">
   </video>
</div>

Or you script the addition of the "is-splash" state class by turning the splash configuration option on. 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 or background-image directives for the container element. However, providing an image is not mandatory to set up a Flowplayer splash screen; in fact there is no CSS 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:

• Upon recognition of the "is-splash" class name or the splash option the VIDEO tag is temporarily removed from the container element.
• 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 ESC key or by calling the unload API method.
• Adding the "is-closeable" state class replaces the fullscreen button with an unload button.

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

Video formats

Currently 3 major video formats are used on the web.

1. MP4 gives a complete cross browser support with the aid of Flash
2. WEBM gives HTML5 video support for the latest Firefox, Chrome and Opera browsers
3. OGG gives HTML5 video support for older versions of Firefox and Opera

Since v5.3 Flowplayer also supports HLS (Apple HTTP Live Streaming) from M3U8 files (demo).

Taken from Wikipedia.

By default Flowplayer attempts to use HTML5 video, and if it's not supported then Flash (9.0+) and MP4 is used. MP4 is enough for complete browser support, but providing WebM and/or OGG video gives you broader support for HTML5 video which is the preferred technology. Also note that Flash does not support byte-range requests, therefore random seeking will not work with MP4 in Flash mode.

Note that browser support of video formats is subject to changes - Chrome is planning to remove MP4 support, and Firefox is planning to add MP4 support. Your best bet for reliable HTML5 video is to provide MP4 and WEBM variants for each of your videos.

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

HLS support so far is confined to on-demand streams because of the lack of HTML5 live video alternatives.

Video attributes

The nested VIDEO tag accepts various arguments. For example:

<video autoplay loop>

• autoplay will start the playback automatically - demo
• loop starts playback again from the beginning when the video ends
• preload starts pre-loading the video in the background
• poster shows an image on the video screen at startup

Both the HTML5 video tag and the Flash component respect these attributes. Particularly have a look at Flowplayer's poster implementation.

Note that there are few browser issues.

Keyboard shortcuts

Here's an overview of the available keyboard shortcuts to control the player:

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

A cheat sheet of the shortcuts is always available to the user when she types ? while hovering over the player area. See also the tooltip configuration option.

Complete list of options

Various plugins accept additional configuration options:

• analytics
• cuepoints
• embed
• playlist

The provided configuration can also be just a string in which case it is interpreted as the swf option.

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 embedded players. When a user clicks the logo she will be redirected to the originating page.

Here are the configuration variables for the commercial version:

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.

Make sure to deploy the commercial release available at your Flowplayer account, or to load the commercial API script from //releases.flowplayer.org/5.4.1/commercial/flowplayer.min.js. Also update the location of flowplayer.swf - in case you previously configured it explicitly via data-swf or flowplayer.conf.swf - to point to the commercial version. Both the commercial API script flowplayer.min.js and Flash file flowplayer.swf are required for license validation.

By default the logo is not shown on your own site (origin domain) because your branding is already there. You can change this with CSS:

.flowplayer .fp-logo {
  display: block;
  opacity: 1;
}

To always show your logo, even while the mouse does not hover over the player area, use:

.flowplayer .fp-logo {
  display: block;
  opacity: 1 !important;
}

Global JavaScript configuration

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

<script src="//releases.flowplayer.org/5.4.1/flowplayer.min.js"></script>
 
<!-- global options -->
<script>
flowplayer.conf = {
   engine: "flash",
   swf: "/media/swf/flowplayer.swf",
   analytics: 'UA-27182341-1'
};
</script>

The flowplayer.conf object contains default configuration for Flowplayer. These should be set right after Flowplayer has been included in your page (with script src). A common place is to have these in an external javascript file that contain the website logic. This is a nice way to set up global settings such as the Google Analytics ID and paths to embedding and flash files.

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

You can set individual options as follows:

<script src="//releases.flowplayer.org/5.4.1/flowplayer.min.js"></script>
 
<script>
flowplayer.conf.engine = "flash";
</script>

Remember to set these after the flowplayer.conf = {...} setting if you have one.

Selective JavaScript configuration

This is the way to configure specific players on the page in conjunction with a manual installation when the document is ready:

$(function () {
   // install player into container elements of class="selected"
   $(".selected").flowplayer({
      // configuration for this player
      splash: true,
      analytics: "UA-27182341-1"
   });
});

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

In this case you avoid to set the hard-coded "flowplayer" class for the container element to avoid processing overhead by an attempted automatic install.

See the manual installation details, installation into an empty container or the JavaScript playlists for further examples.

Selective configuration overrides global configuration.

Selective HTML configuration

Configuration options can also be defined directly in HTML code with "data-" prefix:

<div class="flowplayer" data-engine="flash" data-volume="0.5">
   <video autoplay>
      <source type="video/mp4"  src="/path/to/myvideo.mp4">
      <source type="video/webm" src="/path/to/myvideo.webm">
   </video>
</div>

By taking advantage of the hard-coded "flowplayer" class name, global configuration and data attributes you can set up players with just HTML and CSS. Most of our demos are set up this way avoiding the use of JavaScript completely.

HTML configuration overrides global configuration.