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));
}

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

HTML

view standalone page

Compatibility

  • Important 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.0.2/flowplayer.min.js"></script>
<!-- load the latest version of the audio plugin -->
<script src="//releases.flowplayer.org/audio/flowplayer.audio.min.js"></script>

HTML

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

optionkinddescription
audioBooleanMarks 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.
audioOnlyBooleanWhen 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.
coverImageStringURL of cover image for the (first) clip of this player.
Cannot be used in conjunction with audioOnly.

Clip options

optionkinddescription
audioBooleanIf true, the clip will be treated as audio.
coverImageStringURL of cover image for this clip, when audio is true.

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.

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.

view standalone page | variant offering manual playback on non-autoplay devices

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

HTML

Loading the assets

<!-- background plugin stylesheet -->
<link rel="stylesheet" href="//releases.flowplayer.org/background/flowplayer.background.css">
 
<!-- ... -->
 
<!-- load the Flowplayer script -->
<script src="//releases.flowplayer.org/7.0.2/flowplayer.min.js"></script>
<!-- load the latest version of the background plugin -->
<script src="//releases.flowplayer.org/background/flowplayer.background.min.js"></script>

HTML

Configuration

The plugin provides the background player option:

optionkinddescription
backgroundBooleanWhen true the video is shown in the background of the page.
backgroundObjectThe video is shown in the background, and fine-tuned using background parameters.

Background options

optiondefault valuedescription
audiofalseIf set to true the background player is not muted.
maskrgba(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;
}

CSS

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

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

JavaScript

CSS classes

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

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 brand new hls.js client from dailymotion.

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.

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

<div id="fp-hlsjs" class="is-closeable"></div>
 
<script>
flowplayer("#fp-hlsjs", {
splash: true,
ratio: 9/16,
 
// optional: HLS levels offered for manual selection
hlsQualities: [-1, 1, 3, 6],
 
clip: {
title: "...", // updated on ready
sources: [
{ type: "application/x-mpegurl",
src: "//edge.flowplayer.org/drive.m3u8" },
{ type: "video/webm",
src: "//edge.flowplayer.org/drive.webm" },
{ type: "video/mp4",
src: "//edge.flowplayer.org/drive.mp4" }
]
},
embed: false
 
}).on("ready", function (e, api, video) {
document.querySelector("#fp-hlsjs .fp-title").innerHTML =
api.engine.engineName + " engine playing " + video.type;
 
});
</script>

HTML

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. - Your browser: .

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. Notably MP3 audio tracks are not yet supported.

  • recommendation 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

  • Important The video streams must be served with a cross domain policy (CORS) allowing GET requests.

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>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

XML

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="//releases.flowplayer.org/7.0.2/flowplayer.min.js"></script>
<!-- load the latest version of the hlsjs plugin -->
<script src="//releases.flowplayer.org/hlsjs/flowplayer.hlsjs.min.js"></script>

HTML

Note: 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:

optionkinddescription
hlsjsBooleanPlayers 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.
hlsjsObjectThe 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:

optiondefault valuedescription
adaptOnStartOnlyfalseIf 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.
autoLevelCapping-1Forbids 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.
bufferWhilePausedtrueIf 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.
listenersAn array of hls.js runtime events to be exposed via the player API. Refer to hlsjs events for details.
recoverDeprecated - 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.
recoverMediaErrortrueWhen true, the hlsjs engine will try to recover from otherwise fatal decoding errors if possible.
recoverNetworkErrorfalseWhen 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.
safarifalseIf set to true the plugin is enabled in Safari. Please read the section on browser support before enabling this option.
smoothSwitchingtrueWhether 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.
startLevelfirstLevelTells 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.
strictfalseSet to true if you want non fatal hls.js playback errors to trigger Flowplayer errors. Useful for debugging streams and live stream maintenance.

JavaScript API

The plugin provides complete access to the hls.js client API, namely the quality switch control, via the engine.hlsjs property.

Simple example:

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

JavaScript

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);
 
});
});

JavaScript

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.

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" }
]
},
embed: false
 
}).on("ready", function (e, api, video) {
document.querySelector("#fp-dash .fp-title").innerHTML =
api.engine.engineName + " engine playing " + video.type;
 
});
</script>

HTML

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. - Your browser: .

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][#dash-configuration] on the global, player, and clip level.

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

  • Important The video streams must be served with a cross domain policy (CORS) allowing GET requests.

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>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

XML

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="//releases.flowplayer.org/7.0.2/flowplayer.min.js"></script>
<!-- load the latest version of the dashjs plugin -->
<script src="//releases.flowplayer.org/dashjs/flowplayer.dashjs.min.js"></script>

HTML

Note: 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:

optionkinddescription
dashObjectThe plugin behavior can be fine tuned in the dash configuration object.
This option cannot be set as HTML data-attribute.
dashQualitiesBooleanIf false, disables manual DASH quality selection. Shorthand for an array comprising all quality index numbers.
Can be set as data-dash-qualities HTML attribute.
dashQualitiesArrayAn 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"},
{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:

optiondefault valuedescription
bufferOccupancyABRfalseSet to true if dash.js' new ABR logic should be applied. Current status is experimental.
codecsavc1.42c01e, mp4a.40.2Minimal codec requirement which the browser's MediaSource extension must be able to play.
See also the dashCodecs source option.
debugfalseSet to true to enabled dash.js debug logging.
listenersAn array of dash.js runtime events to be exposed via the player API. Refer to dashjs events for details.
qualitiesForSafaritrueSet this to false to disable manual quality selection in Safari if you encounter problems with your stream.
typevideo/mp4Media type which the browser's MediaSource extension must be able to play.
See also the dashType source option.

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.

  • Warning 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.
optiondefault valuedescription
dashCodecsavc1.42c01e, mp4a.40.2Minimal codec requirement for this source.
dashTypevideo/mp4Media 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);

JavaScript

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);
});
});

JavaScript

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.

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>

HTML

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="//releases.flowplayer.org/7.0.2/flowplayer.min.js"></script>
<!-- the overlay plugin -->
<script src="//releases.flowplayer.org/overlay/flowplayer.overlay.min.js"></script>

HTML

Configuration

The plugin provides the overlay player option:

optionkinddescription
overlaystringSetting this to the selector of a trigger element creates a native overlay player.
overlayobjectCreates an overlay player, usually in a vendor implementation specified in overlay parameters.

Overlay options

optiondefault valuedescription
triggerSet this to the selector of the trigger element of the overlay.
This options is mandatory.
vendornativeThe 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:

optiondefault valuedescription
keyboardtrueThis option is passed to the bootstrap modal. Setting it to false prevents the overlay from closing when the ESC key is pressed.
sizelgThe size of the modal. Either "lg" (the default) or "sm" for small overlays.
titleVideoThe 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:

optiondefault valuedescription
closeBtntrueWhether the fancyBox close button is shown. If set to `false` the overlay is closed with Flowplayer's close button.
maxWidthnullIf 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.

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

If you choose the premium encoding profile in Flowplayer Drive, the sample code offered by the Drive includes the VOD quality selector plugin.

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.

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

HTML

view standalone page

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

Bash

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

Bash

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="//releases.flowplayer.org/7.0.2/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>

HTML

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.

optionkindsample valuedescription
defaultQualitystring"360p"The default resolution. Video height, or width for portrait orientation, in pixels.
qualitiesarray["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.
qualitiesstring"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

methoddescription
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

eventwhen it fires
qualityWhen a VOD quality is manually selected. The 3rd argument provides the index of the selected VOD quality.

Thumbnails

This plugin displays preview thumbnail images on the timeline.

<div id="fp-thumbnails"></div>
 
<script>
flowplayer("#fp-thumbnails", {
ratio: 9/16,
embed: 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/webm",
src: "//edge.flowplayer.org/drive.webm" },
{ type: "video/mp4",
src: "//edge.flowplayer.org/drive.mp4" }
]
}
});
</script>

HTML

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>

HTML

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

Bash

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

Bash

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.

  • caveat Thumbnails cannot be configured in HTML syntax.
propertydefault valuemandatory description
height80noThe displayed thumbnail height in pixels.
interval1noSeconds between thumbnails. Set this if you want to have more than one second between images.
lazyloadtruenoIf false and a thumbnail has not been loaded previously, an already loaded image instead of a black background is shown while the thumbnail loads.
preloadfalsenoIf 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).
startIndex1noThe 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.
templateyesThe 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_timenoFunction 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.

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.

DFP

Monetize your videos using DoubleClick or any VAST compliant ad servers. By Bigsool.

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.

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