Flowplayer plugins

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

AdSense plugin

Our AdSense for video plugin has its own documentation.

Audio plugin

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]({{ config.flowplayer7.standalonedemos }}/plugins/audio-only)

Audio Compatibility

It is also strongly recommended to make your audio HLS streams compatible with the hls.js library.

Loading the audio assets

<!-- audio plugin stylesheet -->
<link rel="stylesheet" href="{{ config.flowplayer7.releases }}/audio/flowplayer.audio.css">

<!-- ... -->

<!-- load the Flowplayer script -->
<script src="{{ config.flowplayer7.releases }}/{{ config.flowplayer7.version }}/flowplayer.min.js"></script>
<!-- load the latest version of the audio plugin -->
<script src="{{ config.flowplayer7.releases }}/audio/flowplayer.audio.min.js"></script>

Audio 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 -
  Flowplayer-hosted video Self-hosted video

  <div data-player-id="cdcc4202-ef0b-4e03-a43a-d1fcf6d83157">
    <script src="//cdn.flowplayer.com/players/ffdf2c44-aa29-4df8-a270-3a199a1b119e/native/flowplayer.async.js">
      {
        "src": "f576651c-4cc6-4664-84fa-bb3b35ef1aba"
      }
    </script>
  </div>

  <div data-player-id="cdcc4202-ef0b-4e03-a43a-d1fcf6d83157">
    <script src="//cdn.flowplayer.com/players/ffdf2c44-aa29-4df8-a270-3a199a1b119e/native/flowplayer.async.js">
      {
        "src": "//edge.flowplayer.org/bauhaus.m3u8"
      }
    </script>
  </div>

  ({{ config.flowplayer7.demos }}/plugins/audio.html)

All options can be set as HTML data-attribute.

Audio Player and clip options

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

Audio plugin Links

• GitHub code repository
• [complete demo]({{ config.flowplayer7.demos }}/plugins/audio.html) with more details

Background plugin

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.

<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]({{ config.flowplayer7.standalonedemos }}/plugins/background) [Variant offering manual playback on non-autoplay devices]({{ config.flowplayer7.demos }}/api/background.html)

Loading the background assets

<!-- background plugin stylesheet -->
<link rel="stylesheet" href="{{ config.flowplayer7.releases }}/background/flowplayer.background.css">

<!-- ... -->

<!-- load the Flowplayer script -->
<script src="{{ config.flowplayer7.releases }}/{{ config.flowplayer7.version }}/flowplayer.min.js"></script>
<!-- load the latest version of the background plugin -->
<script src="{{ config.flowplayer7.releases }}/background/flowplayer.background.min.js"></script>

Background Configuration

The plugin provides the background player option:

Background options

In the background object, you can configure the following parameters:

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

Background CSS classes

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

Background Links

• GitHub code repository
• complete demo with more details

hlsjs plugin

The hlsjs plugin is deprecated. Please use the hlsjs-lite engine

dashjs plugin

Flowplayer can play DASH streams in almost all modern browsers. This offers adaptive bitrate streaming experience in HTML5 video to an ever growing audience. Note: the plugin is currently not actively developed, since you'll need a HLS stream anyway to cate for iOS which does not support DASH / Media Source Extensions.

<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]({{ config.flowplayer7.standalonedemos }}/plugins/dashjs.html)

dashjs Compatibility

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

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

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

dashjs Server side

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 dashjs the assets

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

<!-- load the Flowplayer script -->
<script src="{{ config.flowplayer7.releases }}/{{ config.flowplayer7.version }}/flowplayer.min.js"></script>
<!-- load the latest version of the dashjs plugin -->
<script src="{{ config.flowplayer7.releases }}/dashjs/flowplayer.dashjs.min.js"></script>

dashjs configuration

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

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.

dashjs options

The dash configuration objects provides the following parameters:

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

<div data-player-id="cdcc4202-ef0b-4e03-a43a-d1fcf6d83157">
  <script src="//cdn.flowplayer.com/players/ffdf2c44-aa29-4df8-a270-3a199a1b119e/native/flowplayer.async.js">
    {
      "src": "f576651c-4cc6-4664-84fa-bb3b35ef1aba"
    }
  </script>
</div>

<div data-player-id="cdcc4202-ef0b-4e03-a43a-d1fcf6d83157">
  <script src="//cdn.flowplayer.com/players/ffdf2c44-aa29-4df8-a270-3a199a1b119e/native/flowplayer.async.js">
    {
      "src": "//edge.flowplayer.org/bauhaus.m3u8"
    }
  </script>
</div>

<div data-player-id="cdcc4202-ef0b-4e03-a43a-d1fcf6d83157">
  <script src="//cdn.flowplayer.com/players/ffdf2c44-aa29-4df8-a270-3a199a1b119e/native/flowplayer.async.js">
    {
      "src": "f576651c-4cc6-4664-84fa-bb3b35ef1aba"
    }
  </script>
</div>

<div data-player-id="cdcc4202-ef0b-4e03-a43a-d1fcf6d83157">
  <script src="//cdn.flowplayer.com/players/ffdf2c44-aa29-4df8-a270-3a199a1b119e/native/flowplayer.async.js">
    {
      "src": "//edge.flowplayer.org/bauhaus.m3u8"
    }
  </script>
</div>

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.

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

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

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

dashjs Links

• GitHub code repository
• complete demo with detailed explanations

Overlay plugin

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]({{ config.flowplayer7.standalonedemos }}/plugins/overlay-bootstrap)

Loading the overlay assets

<!-- overlay plugin native stylesheet -->
<link rel="stylesheet"
      href="{{ config.flowplayer7.releases }}overlay/flowplayer.overlay.css">

<!-- the Flowplayer script -->
<script src="{{ config.flowplayer7.releases }}/{{ config.flowplayer7.version }}/flowplayer.min.js"></script>
<!-- the overlay plugin -->
<script src="{{ config.flowplayer7.releases }}//overlay/flowplayer.overlay.min.js"></script>

Overlay configuration

The plugin provides the overlay player option:

Overlay options

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

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

Overlay vendors

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

Overlay bootstrap

• Integrates Flowplayer into a Bootstrap modal.
• Load the overlay vendor script component from {{ config.flowplayer7.releases }}/overlay/vendors/flowplayer.overlay.bootstrap.js
• Does not require an overlay vendor stylesheet.
• Flowplayer-hosted video Self-hosted video Flowplayer-hosted video Self-hosted video Flowplayer-hosted video Self-hosted video

  <div data-player-id="cdcc4202-ef0b-4e03-a43a-d1fcf6d83157">
    <script src="//cdn.flowplayer.com/players/ffdf2c44-aa29-4df8-a270-3a199a1b119e/native/flowplayer.async.js">
      {
        "src": "f576651c-4cc6-4664-84fa-bb3b35ef1aba"
      }
    </script>
  </div>

  <div data-player-id="cdcc4202-ef0b-4e03-a43a-d1fcf6d83157">
    <script src="//cdn.flowplayer.com/players/ffdf2c44-aa29-4df8-a270-3a199a1b119e/native/flowplayer.async.js">
      {
        "src": "//edge.flowplayer.org/bauhaus.m3u8"
      }
    </script>
  </div>

  <div data-player-id="cdcc4202-ef0b-4e03-a43a-d1fcf6d83157">
    <script src="//cdn.flowplayer.com/players/ffdf2c44-aa29-4df8-a270-3a199a1b119e/native/flowplayer.async.js">
      {
        "src": "f576651c-4cc6-4664-84fa-bb3b35ef1aba"
      }
    </script>
  </div>

  <div data-player-id="cdcc4202-ef0b-4e03-a43a-d1fcf6d83157">
    <script src="//cdn.flowplayer.com/players/ffdf2c44-aa29-4df8-a270-3a199a1b119e/native/flowplayer.async.js">
      {
        "src": "//edge.flowplayer.org/bauhaus.m3u8"
      }
    </script>
  </div>

  <div data-player-id="cdcc4202-ef0b-4e03-a43a-d1fcf6d83157">
    <script src="//cdn.flowplayer.com/players/ffdf2c44-aa29-4df8-a270-3a199a1b119e/native/flowplayer.async.js">
      {
        "src": "f576651c-4cc6-4664-84fa-bb3b35ef1aba"
      }
    </script>
  </div>

  <div data-player-id="cdcc4202-ef0b-4e03-a43a-d1fcf6d83157">
    <script src="//cdn.flowplayer.com/players/ffdf2c44-aa29-4df8-a270-3a199a1b119e/native/flowplayer.async.js">
      {
        "src": "//edge.flowplayer.org/bauhaus.m3u8"
      }
    </script>
  </div>

  ({{ config.flowplayer7.standalonedemos }}/plugins/overlay-bootstrap)

The bootstrap vendor provides the following additional overlay options:

Overlay fancyBox

• Integrates Flowplayer into a fancyBox.
• Features a responsive fancyBox by default, to conform with Flowplayer's responsiveness.
• Load the overlay vendor stylesheet from {{ config.flowplayer7.standalonedemos }}/overlay/vendors/flowplayer.overlay.fancybox.css
• Load the overlay vendor script from {{ config.flowplayer7.standalonedemos }}/overlay/vendors/flowplayer.overlay.fancybox.js
• Flowplayer-hosted video Self-hosted video Flowplayer-hosted video Self-hosted video Flowplayer-hosted video Self-hosted video Flowplayer-hosted video Self-hosted video

  <div data-player-id="cdcc4202-ef0b-4e03-a43a-d1fcf6d83157">
    <script src="//cdn.flowplayer.com/players/ffdf2c44-aa29-4df8-a270-3a199a1b119e/native/flowplayer.async.js">
      {
        "src": "f576651c-4cc6-4664-84fa-bb3b35ef1aba"
      }
    </script>
  </div>

  <div data-player-id="cdcc4202-ef0b-4e03-a43a-d1fcf6d83157">
    <script src="//cdn.flowplayer.com/players/ffdf2c44-aa29-4df8-a270-3a199a1b119e/native/flowplayer.async.js">
      {
        "src": "//edge.flowplayer.org/bauhaus.m3u8"
      }
    </script>
  </div>

  <div data-player-id="cdcc4202-ef0b-4e03-a43a-d1fcf6d83157">
    <script src="//cdn.flowplayer.com/players/ffdf2c44-aa29-4df8-a270-3a199a1b119e/native/flowplayer.async.js">
      {
        "src": "f576651c-4cc6-4664-84fa-bb3b35ef1aba"
      }
    </script>
  </div>

  <div data-player-id="cdcc4202-ef0b-4e03-a43a-d1fcf6d83157">
    <script src="//cdn.flowplayer.com/players/ffdf2c44-aa29-4df8-a270-3a199a1b119e/native/flowplayer.async.js">
      {
        "src": "//edge.flowplayer.org/bauhaus.m3u8"
      }
    </script>
  </div>

  <div data-player-id="cdcc4202-ef0b-4e03-a43a-d1fcf6d83157">
    <script src="//cdn.flowplayer.com/players/ffdf2c44-aa29-4df8-a270-3a199a1b119e/native/flowplayer.async.js">
      {
        "src": "f576651c-4cc6-4664-84fa-bb3b35ef1aba"
      }
    </script>
  </div>

  <div data-player-id="cdcc4202-ef0b-4e03-a43a-d1fcf6d83157">
    <script src="//cdn.flowplayer.com/players/ffdf2c44-aa29-4df8-a270-3a199a1b119e/native/flowplayer.async.js">
      {
        "src": "//edge.flowplayer.org/bauhaus.m3u8"
      }
    </script>
  </div>

  <div data-player-id="cdcc4202-ef0b-4e03-a43a-d1fcf6d83157">
    <script src="//cdn.flowplayer.com/players/ffdf2c44-aa29-4df8-a270-3a199a1b119e/native/flowplayer.async.js">
      {
        "src": "f576651c-4cc6-4664-84fa-bb3b35ef1aba"
      }
    </script>
  </div>

  <div data-player-id="cdcc4202-ef0b-4e03-a43a-d1fcf6d83157">
    <script src="//cdn.flowplayer.com/players/ffdf2c44-aa29-4df8-a270-3a199a1b119e/native/flowplayer.async.js">
      {
        "src": "//edge.flowplayer.org/bauhaus.m3u8"
      }
    </script>
  </div>

  ({{ config.flowplayer7.demos }}/plugins/overlay-fancybox.html)

The fancybox vendor provides the following additional overlay options:

Overlay links

• GitHub code repository
• fancybox demo

VOD quality selector plugin

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 bitrate 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]({{ config.flowplayer7.standalonedemos }}/multires/drive-qsel)

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.

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

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

VOD qsel 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 VOD qsel assets

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

<!-- load the Flowplayer script -->
<script src="{{ config.flowplayer7.releases }}/{{ config.flowplayer7.version }}/flowplayer.min.js"></script>
<!-- ... -->
<!-- load the latest version of the VOD quality selector plugn -->
<script
 src="{{ config.flowplayer7.releases }}/vod-quality-selector/flowplayer.vod-quality-selector.min.js">
</script>

VOD qsel configuration

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

• player and
• clip level.

VOD qsel JavaScript API

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

VOD qsel Methods

VOD qsel Events

VOD qsel video object

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

VOD qsel Links

• GitHub code repository

Speed menu plugin

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

Speedmenu 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]({{ config.flowplayer7.standalonedemos }}/plugins/speedmenu)

Speedmenu prerequisites

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

Loading the speedmenu assets

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

<!-- load the Flowplayer script -->
<script src="{{ config.flowplayer7.releases }}/{{ config.flowplayer7.version }}/flowplayer.min.js"></script>
<!-- ... -->
<!-- load the speed menu plugin -->
<script
 src="{{ config.flowplayer7.releases }}/speed-menu/flowplayer.speed-menu.min.js">
</script>

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

Speedmenu Links

• GitHub code repository
• complete demo with more explanations

Thumbnails plugins

This plugin displays preview thumbnail images on the timeline.

Thumbnails 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]({{ config.flowplayer7.standalonedemos }}/plugins/thumbnails)

Prerequisites

Loading the assets

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

<script src="{{ config.flowplayer7.releases }}/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

Thumbnails 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 links

• GitHub code repository
• [complete demo]({{ config.flowplayer7.demos }}/plugins/thumbnails.html) with more explanations

WordPress

The official WordPress plugin for Flowplayer HTML5.

• Flowplayer HTML5 for WordPress web site
• Flowplayer HTML5 for WordPress support

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.

• Plugin site
• Contact

S3 signed URLs for WordPress

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

Depends on the WordPress plugin.

• Plugin site
• Issue tracker

[MINITOC]