FLOWPLAYER PLUGINS

Flowplayer HTML5 plugins make use of the API and skinning capabilities to add features.

AdSense

Our AdSense for video plugin has its own page and documentation.

Audio

Simple plugin to play back audio in Flowplayer HTML5.

Now playing:

##fp-audio .fp-timestamp {
  display: none;
}
##fp-audio .fp-color {
  background-color: #f00;
}
##fp-audio .fp-controls {
  background-color: #600;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(120,0,0,0.85)), to(rgba(120,0,0,0.85)));
  background-image: -webkit-linear-gradient(top, rgba(220,0,0,0.85), rgba(120,0,0,0.85));
  background-image: linear-gradient(to bottom, rgba(220,0,0,0.85), rgba(120,0,0,0.85));
}
<div id="fp-audio" data-audio-only="true" class="fp-fat fp-edgy fp-outlined">

  <!-- this simple plugin uses a video tag for audio too -->
  <video data-title="The National - Fake Empire">
    <source type="application/x-mpegurl" src="//edge.flowplayer.org/fake_empire.m3u8">
    <source type="audio/mp3" src="//edge.flowplayer.org/fake_empire.mp3">
  </video>

</div>

<p>Now playing: <span id="audio-title"></span></p>

<script>
$("#fp-audio").flowplayer({
  splash: true,
  flashls: {
    startfromlevel: 0
  }
});

flowplayer($("#fp-audio")).on("ready", function (e, api, media) {
  $("#audio-title").text(media.title);
});
</script>

View standalone page

Compatibility

The Flash engine can only play HLS audio. For a working failover to Flash in old browsers a HLS stream must be provided.

It is also strongly recommended to make your audio HLS streams compatible with the hlsjs plugin.

Loading the assets

<!-- audio plugin stylesheet -->
<link rel="stylesheet" href="//releases.flowplayer.org/audio/flowplayer.audio.css">

<!-- ... -->

<!-- load the Flowplayer script -->
<script src="//releases.flowplayer.org/7.2.1/flowplayer.min.js"></script>
<!-- load the latest version of the audio plugin -->
<script src="//releases.flowplayer.org/audio/flowplayer.audio.min.js"></script>

Configuration

The plugin can be applied in two modes:

  • As audio only player without screen - demo above
  • Marking clips as audio clips, ideal for mixed video and audio playlists - demo

All options can be set as HTML data-attribute.

Player options

option kind description
audio Boolean Marks the player as audio player when set to true, the (first) clip will be treated as audio.
For clarity it is recommended to set this on the clip level.
audioOnly Boolean When set to true the player is laid out without screen for playback of audio only.
Can also be set via the audio-only configurable state class.
coverImage String URL of cover image for the (first) clip of this player.
Cannot be used in conjunction with audioOnly.

Clip options

option kind description
audio Boolean Marks the player as audio player when set to true, the (first) clip will be treated as audio.
For clarity it is recommended to set this on the clip level.
audioOnly Boolean When set to true the player is laid out without screen for playback of audio only.
Can also be set via the audio-onlyconfigurable state class.
coverImage String URL of cover image for the (first) clip of this player.
Cannot be used in conjunction with audioOnly.

CSS classes

The plugin adds the is-audio or is-audio-only state classes when the audio or audioOnly options are set.

is-audio-only can also be set as configurable state.

Links

Background

The background plugin provides an easy way to show a video as background “image” of the page.

See below how the video is positioned behind this section.

Background plugin

The background plugin provides an easy way to show a video as background of the page.

<div id="fp-background"></div>

<script>
flowplayer("#fp-background", {
    ratio: 9/16,

    // this is a background video
    background: {
        // make mask lighter to reduce distraction
        mask: "rgba(255, 255, 255, 0.9)"
    },
    muted: true,

    clip: {
        sources: [
            { type: "application/x-mpegurl",
              src:  "//cdn.flowplayer.org/202777/153414.m3u8" },
            { type: "video/mp4",
              src:  "//cdn.flowplayer.org/202777/153414.mp4" }
        ]
    }
});
</script>

View standalone page Variant offering manual playback on non-autoplay devices

Loading the assets

<!-- background plugin stylesheet -->
<link rel="stylesheet" href="//releases.flowplayer.org/background/flowplayer.background.css">

<!-- ... -->

<!-- load the Flowplayer script -->
<script src="https://releases.flowplayer.org/7.2.6/flowplayer.min.js"></script>
<!-- load the latest version of the background plugin -->
<script src="//releases.flowplayer.org/background/flowplayer.background.min.js"></script>

Configuration

The plugin provides the background player option:

option kind description
background Boolean When true the video is shown in the background of the page.
background Object The video is shown in the background, and fine-tuned using background parameters.

Background options

option default value description
audio false If set to true the background player is not muted.
mask rgba(255, 255, 255, 0.7) The CSS color of the mask overlaying the player.

Positioning

By default the plugin pins the background container to the top left corner of the page.

If you want it positioned always at the current scrolling position:

/* assuming fp-background as identifier for background player */
##fp-background {
  position: fixed;
}

On this page we anchor the background video dynamically with jQuery at the heading of this section:

$("#fp-background").css({
  top: $("#background").position().top
});

CSS classes

The plugin adds the is-background state-class to the player container.

Links

hlsjs

Present video in optimal quality via Adaptive Bit Rate streaming (ABR) in modern desktop browsers without the need for Flash.

Get your ticket to the future of HLS with this plugin developed on top of the hls.js client library.

Integrates seamlessly with your HLS streams from Flowplayer Drive.

Manual HLS quality level selection via the HD menu is available out of the box. See also the hlsQualities player and clip option.

If a stream offers alternate audio renditions (#EXT-X-MEDIA) as in the demo below a selection menu is added to the controlbar (currently not supported by Safari).

HLS subtitle display and selection can be enabled via the subtitles hlsjs option.

The hlsjs plugin is also loaded by Twitter shared and embedded players.

<div id="fp-hlsjs">
  <a class="fp-prev"></a>
  <a class="fp-next"></a>
</div>

<script>
flowplayer("#fp-hlsjs", {
    splash: true,
    loop: true,
    ratio: 9/16,

    playlist: [{
        title: "3 audio tracks",
        hlsjs: {
            // codec not specified in master playlist
            defaultAudioCodec: "mp4a.40.2"
        },
        sources: [
            { type: "application/x-mpegurl",
              src: "//wowzaec2demo.streamlock.net/vod-multitrack/_definst_/smil:ElephantsDream/ElephantsDream.smil/playlist.m3u8" }
        ]
    }, {
        title: "4 subtitle tracks, 2 audio tracks",
        hlsjs: {
            // enable subtitle display
            subtitles: true,
            // enable audio ABR
            audioABR: true
        },
        sources: [
            { type: "application/x-mpegurl",
              src: "//bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8" }
        ]
    }],
    embed: false
});
</script>

View standalone page

Compatibility

Browser support

The hlsjs engine provided by the plugin is loaded if the browser features the MediaSource extension, and if the MediaSource implementation reliably handles playback of segmented MPEG-4 video.

Note: Mac OS Safari’s MediaSource implementation has issues with remuxed MPEG-4 segments - for the moment the hlsjs engine will be loaded in Safari only if the safari hlsjs option is enabled.

Stream compatibility

For stream compatibility check the list of supported m3u8 tags and the as of yet unsupported HLS features.

Chromecast cannot play streams with alternate audio renditions.

Test your streams in the hls.js demo player. In case of playback issues with the hls.js client, we encourage you to use the hls.js bug tracker as first port of call.

Server side

The video streams must be served with a cross domain policy (CORS) allowing GET requests. If the segments are not static files, but are retrieved via byte-range requests HEAD and OPTIONS must be allowed as well.

Sample CORS Configuration for Amazon S3:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>

        <!-- only required for byte-range based retrieval -->
        <AllowedMethod>HEAD</AllowedMethod>

        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

For other server configurations, please check enable-cors.org .

Loading the assets

The only requirement is to load the plugin after the Flowplayer script.

<!-- load the Flowplayer script -->
<script src="https://releases.flowplayer.org/7.2.6/flowplayer.min.js"></script>
<!-- load the latest version of the hlsjs plugin -->
<script src="//releases.flowplayer.org/hlsjs/flowplayer.hlsjs.min.js"></script>

To speed up page loading a ‘light’ version of the plugin can be used:

<!-- load the Flowplayer script -->
<script src="https://releases.flowplayer.org/7.2.6/flowplayer.min.js"></script>
<!-- load the latest 'light' version of the hlsjs plugin -->
<script src="//releases.flowplayer.org/hlsjs/flowplayer.hlsjs.light.min.js"></script>

The full plugin is required for support of:

The development of the client library for this plugin is a fast moving target. Loading the latest version of the plugin as above is recommended. It packs a recent and tested release of the client library.

Configuration

The plugin can be configured on the clip, player and global level of the Flowplayer configuration.

All configuration is done by the hlsjs option:

option kind description
hlsjs Boolean Players can be told to disable the plugin by setting this to false. Normally used only for testing Flash HLS.
Can be set on clip level for convenience, but as it decides what engine to load it will only have an effect if configured for a single clip or the first clip of a playlist.
hlsjs Object The plugin behavior can be fine tuned in the hlsjs configuration object.
This option cannot be set as HTML data-attribute.

hlsjs options

The hlsjs configuration object makes all hls.js tuning parameters available for Flowplayer.

Additionally hlsjs accepts the following Flowplayer-specific properties:

option default value description
adaptOnStartOnly false If set to true adaptive bitrate switching is disabled after a suitable HLS level is chosen in an initial bandwidth check before playback. Useful for shorter videos, especially when looping.
audioABR false If multiple audio groups are present the hlsjs engine will load only one by default, regardless of the current video level. If this option is set to true the corresponding audio track will be loaded on level switch.
Requires the full plugin build.
autoLevelCapping -1 Forbids the player to pick a higher clip resolution/bitrate than specified when in ABR mode. Accepts an index number from 0 (lowest) to highest. The default value -1 means no capping, and may also be specified as boolean false.
bufferWhilePaused true If set to false the player does not buffer segments in paused state. Be careful, this may affect playback quality after pausing and seeking performance in paused state.
For bandwidth saving it is recommended to compare the effect with the generic hls.js buffer related options, especially maxMaxBufferLength.
listeners An array of hls.js runtime events to be exposed via the player API. Refer to hlsjs events for details.
recover Deprecated - use recoverMediaError or/and recoverNetworkError instead.
Maximum attempts to recover from network and media errors which are considered fatal by hls.js. If set to -1, recovery is always tried.
recoverMediaError true When true, the hlsjs engine will try to recover from otherwise fatal decoding errors if possible.
recoverNetworkError false When true, the hlsjs engine will try to recover from otherwise fatal network errors if possible.
Note: Enabling network error recovery changes player behaviour, and only for the hlsjs engine.
safari false If set to true the plugin is enabled in Safari. Please read the section on browser support before enabling this option.
smoothSwitching true Whether manual HLS quality switching should be smooth - level change with begin of next segment - or instant. Setting this to false can cause a playback pause on switch.
startLevel firstLevel Tells the player which clip resolution/bitrate to pick initially. Accepts an index number from 0 (lowest) to highest. Defaults to the level listed first in the variant (master) playlist, as with generic HLS playback. Set to -1 or "auto" for automatic selection of suitable level after a bandwidth check.
strict false Set to true if you want non fatal hls.js playback errors to trigger Flowplayer errors. Useful for debugging streams and live stream maintenance.
subtitles false If set to true HLS subtitles are shown. If there are multiple subtitle tracks available, they can be selected from the CC menu. Native subtitle display can be configured via the nativesubtitles player option.
Requires the full plugin build.

JavaScript API

The plugin provides complete access to the hls.js client API via the engine.hlsjs property.

Simple example:

// switch to first hls level
flowplayer(0).engine.hlsjs.nextLevel = 0;

Video object

If several video quality levels are available and hls quality selection is enabled, the current video object features these additional properties:

property kind description
quality integer The currently selected video quality; -1 stands for adaptive selection.
qualities array Lists all qualities available for manual selection.

Events

hls.js client runtime events which are listed in the listeners hlsjs configuration are exposed to the Flowplayer API. The third argument of the event handle functions gives access to the event’s data.

// expose hls.js LEVEL_SWITCH event to Flowplayer API
flowplayer.conf.hlsjs = {
  listeners: ["hlsLevelSwitch"]
};

flowplayer(function (api) {
  api.on("hlsLevelSwitch", function (e, api, data) {
    // listen to Hls.Events.LEVEL_SWITCH
    var level = api.engine.hlsjs.levels[data.level];

    console.info("switched to hls level index:", data.level);
    console.info("width:", level.width, "height": level.height);

  });
});

The mappings of hls.js event names to their respective constants are listed here.

Migration from Flowplayer Version 6

hlsQualities is now a core option. Note: The adaptive bitrate level -1 must now be specified explicitly as first item of the hlsQualities array.

No additonal CSS resources have to be loaded for manual HLS level selection, the builtin HD menu is used to present the choices.

Links

dashjs

Flowplayer can play DASH streams in almost all modern browsers. This offers adaptive bitrate streaming experience in HTML5 video to an ever growing audience.

<div id="fp-dash" class="is-closeable"></div>

<script>
flowplayer("#fp-dash", {
    splash: true,
    ratio: 9/16,
    hlsjs: false,

    // Safari issues with manual switching for this stream
    // -> disable
    dash: {
      qualitiesForSafari: false
    },

    clip: {
        title: "...", // updated on ready
        sources: [
            { type: "application/dash+xml",
              src:  "//edge.flowplayer.org/drive.mpd" },
            { type: "application/x-mpegurl",
              src:  "//edge.flowplayer.org/drive.m3u8" },
            { type: "video/mp4",
              src:  "//edge.flowplayer.org/drive.mp4" }
        ]
    },
    share: false

}).on("ready", function (e, api, video) {
    document.querySelector("#fp-dash .fp-title").innerHTML =
            api.engine.engineName + " engine playing " + video.type;

});
</script>

View standalone page

Compatibility

Browser support

The dash engine provided by the plugin is loaded if the browser features the MediaSource extension, and if the MediaSource implementation reliably handles playback of the configured media type and codecs.

Stream compatibility

  • Android devices cannot play HE-AAC audio (mp4a.40.5)
  • Mac OS desktop Safari cannot play AVC3 encoded video, only AVC1 (more details)

Test your streams in the dash.js sample player. In case of playback issues with the dash.js client, we encourage you to use the dash.js bug tracker as first port of call.

DASH quality selection

Manual DASH quality selection is available out of the box via the HD menu if the stream is delivered from a manifest with several video representations.

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

Note: Due to problems with Safari’s MediaSource implementation manual DASH quality selection can be disabled for Safari with the qualitiesForSafari dash engine option.

Server side

The video streams must be served with a cross domain policy (CORS) allowing GET requests. If the segments are not static files, but are retrieved via byte-range requests HEAD and OPTIONS must be allowed as well.

Sample CORS Configuration for Amazon S3:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>

        <!-- only required for byte-range based retrieval -->
        <AllowedMethod>HEAD</AllowedMethod>

        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

Wowza Streaming Engineā„¢ 4.0 and above allows CORS to be set in the configuration

If you use Cloudfront, make sure to whitelist the CORS headers. For server implementation instructions refer to enable-cors.org.

Loading the assets

The only requirement is to load the plugin after the Flowplayer script:

<!-- load the Flowplayer script -->
<script src="https://releases.flowplayer.org/7.2.6/flowplayer.min.js"></script>
<!-- load the latest version of the dashjs plugin -->
<script src="//releases.flowplayer.org/dashjs/flowplayer.dashjs.min.js"></script>

The development of the client library for this plugin is a fast moving target. Loading the latest version of the plugin as above is recommended. It packs a recent and tested release of the client library.

Configuration

The plugin can be configured on the player and global level of the Flowplayer configuration with this option:

option kind description
dash Object The plugin behavior can be fine tuned in the dash configuration object.
This option cannot be set as HTML data-attribute.
dashQualities Boolean If false, disables manual DASH quality selection. Shorthand for an array comprising all quality index numbers.
Can be set as data-dash-qualities HTML attribute.
dashQualities Array An array of DASH qualities to offer for manual DASH quality selection. The qualities are specified as index numbers from 0 (lowest) to highest. Example:
[-1, 1, 6]
Can be set as dash-hls-qualities HTML attribute.
Levels may also be specified with a custom selector menu label:
[{level: -1, label: "ABR"},<br>{level: 1, label: "SD"}, {level: 6, label: "HD"}]
In this case dashQualities cannot be set as HTML data attribute.

Can also be set on the clip level, but it will only have an effect if the engine is loaded for this clip, usually in single clip configurations or for the first clip in a playlist.

dash options

The dash configuration objects provides the following parameters:

option default value description
codecs avc1.42c01e,mp4a.40.2 Minimal codec requirement which the browser’s MediaSource extension must be able to play.
See also the dashCodecssource option.
debug false Set to true to enable dash.js debug logging.
listeners An array of dash.js runtime events to be exposed via the player API. Refer todashjs events for details.
initialVideoQuality -1 Tells the player which video representation to choose when starting playback. By default -1 the optimal quality according to the ABR algorithm is picked. Accepts an integer referencing the corresponding representation index, from 0 for lowest quality to highest.
liveDelay Live stream latency in seconds. Default: equivalent in seconds of liveDelayFragmentCount.
Setting this overrides liveDelayFragmentCount.
See also useSuggestedPresentationDelay.
liveDelayFragmentCount 4 Live stream latency in multiples of detected segment duration. Lowering this value risks an unstable playback buffer.
See also useSuggestedPresentationDelay.
protection Object containing DRM parameters. Check the source code of this demo for an example.
Note: Chrome demands that all assets are served via https for DRM to work.
Caveat: Safari’s MediaSource implementation does not support commonly used proprietary DASH encryption licenses.
protectionLevel If set correctly, suppresses Chrome warnings regarding unspecified encryption robustness level.
Accepted values are: "SW_SECURE_CRYPTO", "SW_SECURE_DECODE", "HW_SECURE_CRYPTO", "HW_SECURE_CRYPTO", "HW_SECURE_DECODE", "HW_SECURE_ALL".
qualitiesForSafari true Set this to false to disable manual quality selection in Safari if you encounter problems with your stream.
type video/mp4 Media type which the browser’s MediaSource extension must be able to play.
See also the dashType source option.
useSuggestedPresentationDelay false Set to true to honor the live delay given by the manifest’s SuggestedPresentationDelay.
Overrides liveDelayFragmentCount.
xhrWithCredentials Accepts an array of HTTP request types for which the XHR requests should be sent with credentials.
For instance: xhrWithCredentials: ["MPD", "MediaSegment"]

Source options

If a stream is offered which cannot be played in certain browsers or on certain devices, its type and codecs requirments can be specified as source option to enable failover to an alternative stream which meets minimal requirements - demo.

Only set a Dash source option when you list another Dash stream safe for failover as next source! Otherwise the player will not start in clients which cannot play this source.

option default value description
dashCodecs avc1.42c01e,mp4a.40.2 Minimal codec requirement for this source.
dashType video/mp4 Media type for this source.

JavaScript API

The plugin gives complete access to the dash.js MediaPlayer API via the engine.dash property.

Simple example:

var dashapi = flowplayer(0).engine.dash;
// switch to lowest video quality
dashapi.setAutoSwitchQualityFor("video", false);
dashapi.setQualityFor("video", 0);

Video object

If several video representions are available and dash quality selection is enabled, the current [video object](../(api#video-object) features these additional properties:

property kind description
quality integer The currently selected video quality level; -1 stands for adaptive selection.
qualities array Lists all qualities available for manual selection.

Events

The third argument of the event handle functions gives access to the event’s data if available.

dash.js client events which are listed in the listeners dash configuration are exposed to the Flowplayer API. The third argument of the event handle functions gives access to the event’s data if available.

// expose dashjs.MediaPlayer.events.MANIFEST_LOADED event to Flowplayer API
flowplayer.conf.dash = {
  listeners: ["dashManifestloaded"]
};

flowplayer(function (api) {
  // inspect data provided by dash.js MANIFEST_LOADED event
  api.on("dashManifestloaded", function (e, api, data) {
    console.info(data);
  });
});

The mappings of dash.js event names to their respective constants are listed here.

The event name exposed to the Flowplayer API is prefixed with dash and the name of the orginal event capitalized.

Links

Overlay

The overlay plugin offers an easy way to show videos in an overlay (or modal window).


<div id="modal-trigger">
  <a>Show video in native overlay</a>
</div>

<div id="fp-overlay"></div>

<script>
flowplayer("#fp-overlay", {
    ratio: 9/16,

    overlay: "#modal-trigger>a",

    clip: {
        title: "The New Flowplayer",
        sources: [
            { type: "application/x-mpegurl",
              src:  "//cdn.flowplayer.org/202777/161579.m3u8" },
            { type: "video/mp4",
              src:  "//cdn.flowplayer.org/202777/161579.mp4" }
        ]
    }
});
</script>

View standalone page

The plugin can be extended with vendor compononents. Here is an example using the Bootstrap framework:

View standalone page

Loading the assets

<!-- overlay plugin native stylesheet -->
<link rel="stylesheet"
      href="//releases.flowplayer.org/overlay/flowplayer.overlay.css">

<!-- the Flowplayer script -->
<script src="{{ env.releases_url }}/flowplayer.min.js"></script>
<!-- the overlay plugin -->
<script src="//releases.flowplayer.org/overlay/flowplayer.overlay.min.js"></script>

Configuration

The plugin provides the overlay player option:

option kind description
overlay string Setting this to the selector of a trigger element creates a native overlay player.
overlay object Creates an overlay player, usually in a vendor implementation specified in overlay parameters.

Overlay options

option default value description
trigger Set this to the selector of the trigger element of the overlay.
This options is mandatory.
vendor native The overlay implementation. If not 'native' an additional script resource integrating an overlay capable player into a third party modal window or overlay instance.

The vendor script may allow to set further vendor specific options in the overlay configuration object.

CSS classes

The plugin adds the is-overlaid state-class to the player container and additionally the is-open class while the overlay is shown.

Vendors

Overlay vendor scripts and stylesheets should be loaded after the overlay plugin script.

Bootstrap

  • Integrates Flowplayer into a Bootstrap modal.
  • Load the overlay vendor script component from //releases.flowplayer.org/overlay/vendors/flowplayer.overlay.bootstrap.js
  • Does not require an overlay vendor stylesheet.
  • demo

The bootstrap vendor provides the following additional overlay options:

option default value description
keyboard true This option is passed to thebootstrap modal. Setting it to false prevents the overlay from closing when the ESC key is pressed.
size lg The size of the modal. Either "lg" (the default) or "sm" for small overlays.
title Video The modal title.
If not specified, it is updated with the current clip’s title if present.

fancyBox

  • Integrates Flowplayer into a fancyBox.
  • Features a responsive fancyBox by default, to conform with Flowplayer’s responsiveness.
  • Load the overlay vendor stylesheet from //releases.flowplayer.org/overlay/vendors/flowplayer.overlay.fancybox.css
  • Load the overlay vendor script from //releases.flowplayer.org/overlay/vendors/flowplayer.overlay.fancybox.js
  • demo

The fancybox vendor provides the following additional overlay options:

option default value description
closeBtn true Whether the fancyBox close button is shown. If set to false the overlay is closed with Flowplayer’s close button.
maxWidth null If set limits the maximum width of the overlay - default: 80% of current window width - to the given value in pixels. Useful for portrait oriented videos which are bound to exceed the available screen estate otherwise.

Links

VOD quality selector

Offering VOD files for manual quality selection may be preferable over HLS quality selection:

  • VOD files can be encoded to (slightly) better quality at the same average bit rate because streaming constraints do not have to be obeyed
  • a multi variant HLS stream may not be available

The quality selector can also be used with videos which are not served from Flowplayer Drive as long as the file name layout obeys the criteria outlined below. –>

HTML Code:

<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.com/demos/showcase/qsel/",
    // facebook share url points to page with opengraph tags
    // to share HLS stream
    facebook: "https://flowplayer.com/demos/showcase/qsel/",
    embed: {
        // embed including quality selector
        iframe: "//flowplayer.com/standalone/docs/player/multires/drive-iframe.html"
    }
});
</script>

View standalone page

Like with HLS quality selection the HD menu is available in the controlbar and presents the user with a choice of playback qualities:

  1. Auto, for Automatic selection of a HLS stream in the quality best suited for the current connection speed and device - not shown if no source of type application/x-mpegurl is present
  2. several {resolution}p selectors to choose a static quality, where {resolution} is the height of the video.

Prerequisites

Apart from the (optional) HLS source the videos for manual selection must be available in the same formats across all resolutions.

Servers

Additional RTMP delivery of the videos for manual selection is required to cater for old browsers which cannot play HTML5 video and to ensure that playback can resume at the same position after a quality switch.

File name layout

The plugin expects all the sources to reside in the same directory according to this file naming scheme:

filename.m3u8            # HLS variant playlist, no label
filename.webm            # default quality, max 480p (640x480), no label
filename.mp4
filename-{height}p.webm  # resolution in {height} pixels (portrait: {width})
filename-{height}p.mp4
 ...
 ...

In the example above:

## 8 HLS resolutions, adaptive
84049-bauhaus.m3u8
## 4 resolutions for manual selection
84049-bauhaus-160p.webm  # LO-FI
84049-bauhaus-160p.mp4
84049-bauhaus.webm       # default quality, 260p
84049-bauhaus.mp4
84049-bauhaus-530p.webm  # HD
84049-bauhaus-530p.mp4
84049-bauhaus-800p.webm  # FULL HD
84049-bauhaus-800p.mp4

The directory can differ on the RTMP server, but the the base name scheme within the directory must be the same.

Playlist

When the plugin is used in conjunction with playlists the above base name requirements apply for each clip, but the clips can reside in different directories and on different servers.

If you serve different clips from different RTMP servers, then you must specify the rtmp option for every clip on the clip level.

Loading the assets

Load the VOD quality selector script in the HEAD section of your page:

<!-- load the Flowplayer script -->
<script src="https://releases.flowplayer.org/7.2.6/flowplayer.min.js"></script>
<!-- ... -->
<!-- load the latest version of the VOD quality selector plugn -->
<script
 src="//releases.flowplayer.org/vod-quality-selector/flowplayer.vod-quality-selector.min.js">
</script>

Configuration

The plugin provides two options to configure the resolutions available for manual selection. They can be set at player and clip level.

Note: Configuring VOD qualities disables manual HLS quality selection.

option kind sample value description
defaultQuality string “360p” The default resolution. Video height, or width for portrait orientation, in pixels.
qualities array [“216p”, “360p”, “720p”, “1080p”] List of resolutions offered for manual selection in ascending order.
Must be specified in JavaScript syntax, not in a HTML configuration.
qualities string “216p,360p,720p,1080p” Comma separated string listing resolutions offered for manual selection in ascending order.
Deprecated. Kept for backwards compatibility with existing setups.

JavaScript API

The VOD quality selector provides tailors and overrides the core quality function and event for VOD:

Methods

method description
quality(quality) Switches playback to VOD quality index given in the argument. The index is zero-based for fixed qualities in the configured qualities array, -1 for adaptive.

Events

event when it fires
quality When a VOD quality is manually selected. The 3rd argument provides the index of the selected VOD quality.

Video object

If several video quality levels are available, the current video object features these additional properties:

property kind description
quality integer The currently selected video quality; -1 stands for adaptive selection, otherwise from 0 in ascending order.
qualities array Lists all qualities available for manual selection, in object notation with two properties:
label: the label for this quality.
value: the level of this quality, -1 for adaptive quality, manual levels from 0 in ascending order.

Links

Speed menu

The speed menu offers a graphical interface to select playback rates, which are by default only available via keyboard shortcuts.

HTML code:

<div id="fp-speedmenu"></div>

<script>
flowplayer("#fp-speedmenu", {
    aspectRatio: "12:5",
    share: false,
    splash: true,
    clip: {
        sources: [
            { type: "application/x-mpegurl",
              src:  "//edge.flowplayer.org/bauhaus.m3u8" },
            { type: "video/mp4",
              src:  "//edge.flowplayer.org/bauhaus.mp4" }
        ]
    }
});
</script>

View standalone page

Prerequisites

By loading the plugin the speed menu will be present on all players on the page.

Loading the assets

Load the speed menu plugin after the Flowplayer script in the HEAD section of your page:

<!-- load the Flowplayer script -->
<script src="https://releases.flowplayer.org/7.2.6/flowplayer.min.js"></script>
<!-- ... -->
<!-- load the speed menu plugin -->
<script
 src="//releases.flowplayer.org/speed-menu/flowplayer.speed-menu.min.js">
</script>

That’s it. The plugin will automatically recognize the configured or default speeds.

Links

Thumbnails

This plugin displays preview thumbnail images on the timeline.

HTML code:

<div id="fp-thumbnails"></div>

<script>
flowplayer("#fp-thumbnails", {
    ratio: 9/16,
    share: false,
    hlsQualities: false,
    clip: {
        // configure thumbnails for this clip
        thumbnails: {
            template: "//edge.flowplayer.org/drive/thumbs/{time}.jpg",
            preload: true
        },

        sources: [
            { type: "application/x-mpegurl",
              src:  "//edge.flowplayer.org/drive.m3u8" },
            { type: "video/mp4",
              src:  "//edge.flowplayer.org/drive.mp4" }
        ]
    }
});
</script>

View standalone page

Prerequisites

Loading the assets

Load the thumbnails plugin after the Flowplayer script in the HEAD section of your page:

<script src="//releases.flowplayer.org/thumbnails/flowplayer.thumbnails.min.js"></script>

Generating thumbnails

To fit the required template configuration option all thumbnail images for a clip are expected to have the same name, with the only variant an incremental index starting at 1.

Simple ffmpeg command example to generate thumbnail images every second from a video called myvideo.mp4:

$ ffmpeg -i myvideo.mp4 -filter:v framerate=1/1,scale=-1:160 myvideo%d.jpg

This will create images named myvideo1.jpg, myvideo2.jpg, myvideo3.jpg, … Note that myvideo1.jpg will be a snapshot of the first video frame at time position 0, myvideo2.jpg at position 2 etc.

The divisor of the framerate filter value should be the one which is used for the interval option.

To cater for devices with retina display scale height should be 2 times the value of the desired height option.

Especially for longer videos it is recommended to save as much on image file size as possible to save on loading time.

Example command to batch create and optimize thumbnail images every 5th second with target retina display height of 50px named 1.jpg, 2.jpg, …:

$ ffmpeg -i bauhaus.mp4 -filter:v framerate=1/5,scale=-1:100 -q:v 5 %d-X.jpg
$ for i in *-X.jpg; \
do jpegtran -copy none -optimize -outfile ${i%-X.jpg}.jpg $i; \
done
$ rm *-X.jpg

Configuration

Options can be set on the clip, player and global level of the flowplayer configuration with the key thumbnails. This allows common properties to be set on a higher level, e.g., for a playlist height can configured once in the player configuration, leaving only template to be set for each clip.

Thumbnails cannot be configured in HTML syntax.

property default value mandatory description
height 80 no The displayed thumbnail height in pixels.
interval 1 no Seconds between thumbnails. Set this if you want to have more than one second between images.
lazyload true no If false and a thumbnail has not been loaded previously, an already loaded image instead of a black background is shown while the thumbnail loads.
preload false no If true, all images are cached at player initialization to make them appear quicker. Useful when thumbnails are of high interest for a shorter video and video is preloaded (no splash setup).
startIndex 1 no The number of the first image used in its filename and for the sequential template expansion. Example: set this to 0 if the first image mapped to video time 0 is named 0.jpg.
template yes The location from where to load the thumbnail images. Either an absolute or relative path. It must contain {time} as a placeholder for the 1-based image name index.
format_time no Function to determine the time format in the {time} expando dynamically. The function expects the current video time in its single argument. By default it returns it unchanged. Useful for instance when the thumbnail filenames are zero padded.

Links

VAST

Our VAST advertising plugin has its own page and documentation.

WordPress

The official WordPress plugin for Flowplayer HTML5.

Plugins by others

This section provides links to the respective plugin and support/contact sites. If you encounter problems with setups including a third party plugin, please turn to their support.

Electroteque Multimedia

Electroteque Multimedia offer more than a dozen plugins for Flowplayer HTML5, for YouTube videos, and Vimeo among others.

S3 signed URLs for WordPress

Enables the use of Amazon S3 signed urls for protected video streaming.

Depends on the WordPress plugin.

Complete protection is not possible with HTML5 video and signed URLs, as explained on this test page.