Creating a player configuration

You build player configurations for the hosted Flowplayer Native player in the player configurator of Flowplayer OVP, where you set the player's general behavior, hostname restrictions, ad schedule, appearance and plugins.

To create a new configuration simply click the + New player button.

Player configurations have the following options:

• General
  • Behavior
  • Hostname restriction
  • Ad schedule
• Appearance
• Plugins

General

Under the general options you can:

• Set the internal name for the player
• Set the player as your workspace's default player
• Specify certain behaviors and initial states of the player
• Set the hostname restrictions
• Select an ad schedule

Behavior

You can configure the way the player behaves with the following options:

• Playback:
  • Autoplay: should the video start on page load? (note: some browsers and most mobile devices only allow muted autoplay; if this is the case and you selected Autoplay, Flowplayer will start without sound)
  • Muted: whether the player should always start the video with sound turned off
  • Loop: should the video automatically restart after it ended
• Preload configuration: whether to preload the content or its metadata. Auto will attempt to load the complete content (careful: this might impose high bandwidth usage on page load even if the visitor does not start the video), default is set to 'none'
• Starting quality: the quality level the player starts playback with, see Starting quality below

Starting quality

The Starting quality setting decides which quality level of an HLS stream the player loads first when playback starts. It applies to videos and livestreams with several quality levels.

The setting only applies to the start of playback. After that, the player keeps adapting the quality to the viewer's bandwidth as usual. To let viewers choose a quality themselves, add the Quality selection plugin.

If you embed the player with JavaScript, you can override the setting per embed with the start_quality configuration option.

Security

You can secure your player configuration from being embedded in non-authorized sites by adding hostname restrictions.

Examples of good hostnames are:

flowplayer.com
play.flowplayer.com
embed.cnn.com
comcast.com
*.domain.com
localhost
my.very.own.hostname.org

Examples of incorrectly specified hostnames are:

http://play.flowplayer.com
//embed.cnn.com
embed.cnn.com:8888
localhost:5000
localhost:80
https://comcast.com/page
http://my.very.own.hostname.org
my.hostname.org/page

We also offer advanced content protection options as part of the Enterprise plan which allow you to:

• Geo-block by whitelisting or blacklisting countries
• Encryption of content using AES
• DRM protection using Widevine, FairPlay or Playready

Please contact us if you want to purchase custom content protection solutions.

Ad schedule

See Advertising

Appearance

You can configure the appearance of the player in several ways:

• Play icon: choose between one of three predefined themes for the centered play icon
• Control bar: set the thickness of the timeline and whether to show a drag handle or not
• Brand color: set the color of the timeline and volume bar. Either click the predefined colors or specify your own color in HEX format.
• Custom logo: display a logo on the top/left corner by adding the image URL
• Buttons: customize which buttons should be visible in the controlbar: volume, mute, fullscreen
• Metadata: specify if the asset's title (name) and/or description should be displayed. This will be visible to the bottom/left of the splash screen before the content has started playing.
• Language: the language used in the player UI. Available languages are: Czech, English, Finnish, French, German, Hebrew, Norwegian Bokmål, Norwegian Nynorsk, Portuguese, Slovak, Spanish and Swedish

Plugins

Plugins are used to add more features and functionality to the player. Many plugins are simply on/off, they add features to the player by simply being selected, but certain plugins are configurable. These are configured with the form that appears when clicking the Open config button after the plugin is selected.

Add a plugin by clicking and then selecting the plugin you want. If the plugin is configurable, choose your options.

Here are descriptions of the plugins that are currently available:

• Quality selection: Adds a menu to the player that lets the viewer choose from the asset's different quality levels (available for HLS and DASH)
• Speed selection: Adds a menu to the player that lets the viewer choose the playback speed. You can configure the speed options as well as their labels. Click Add row to add more options. Clear the field for an option to remove it.
• Float on scroll: The player will float in the bottom left corner of the viewport if the player element on the page is scrolled out of view. Does not work in iframe embeds.
• Keyboard control: Enables using the keyboard to control the player, such as pressing the space bar to pause/resume playback and jumping back and forth with the arrow keys. Enhances the accessibility of the player.
• Chromecast integration: Enables Chromecast support in the player. If a Chromecast device is in range on the network, a device selection button will appear in the player.
• Airplay integration: Enables Airplay support in the player. If an Airplay device is found, a device selection button will appear in the player.
• Sharing: Adds a share menu to the player allowing the viewer to share it using a code snippet (iframe), a link, Facebook and/or Twitter. For when you have embedded the player with an iframe, you can specify if the URL to be shared should be the iframe URL (Player) or the URL of the page that embedded it (Parent). This option is not applicable when you have embedded the player using Javascript.
• End screen recommendations: When playback has ended, the player will show a grid of recommended videos from your video inventory. You can choose one of your playlists as a source for these recommendations or you can choose it to be Automatic, in which case we automatically select relevant videos from your workspace to increase your audience engagement.

Ad schedule

If you're subscribed to a Starter, Professional or Enterprise plan, you have the possibility to specify which ad schedule a video player should use, or deciding not to have an ad schedule for the video player.

If you want to programmatically override the ad configuration you can do that using the JavaScript embed. An example how it could look is shown below. Please visit the player ad configuration documentation for a full sample documentation.

<div id="player-f576651c-4cc6-4664-84fa-bb3b35ef1aba"></div>
<script type="module">
  import flowplayer from "https://embed.flowplayer.com/cdcc4202-ef0b-4e03-a43a-d1fcf6d83157/f576651c-4cc6-4664-84fa-bb3b35ef1aba.js";
  flowplayer("#player-f576651c-4cc6-4664-84fa-bb3b35ef1aba", {
    ima: {
      ads: [{ time: 0, adTag: "https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dskippablelinear&correlator=" }]
    }
  });
</script>

Code variables

In the embed code samples on this page,

• <player id> in the import URL https://embed.flowplayer.com/<player id>/<videoid>.js identifies the skinning and behavior configuration you created. You can see the id in the page url when selecting a player design.
• <videoid> is the media ID of the Flowplayer video or remote asset. By default it's also part of the id of the element the player is rendered into.
• For content that isn't registered as an asset, import https://embed.flowplayer.com/<player id>.js instead and set src: "//edge.flowplayer.org/bauhaus.m3u8" to the url of the video stream/file. Use any unique id for the player element.
• my_configuration is a dummy for the various additional player configuration options

Unlike the legacy async embed, the ESM embed doesn't need the workspace (site) ID.

For more advanced configuration options if you host the content yourself please see the documentation on player configuration of the source. You can also see more information about supported media formats.

Overriding the player options

Flowplayer has a very extensive Player API and if you want you can override or extend the player configuration using styling and JavaScript.

Loading plugins

The JavaScript (ESM) embed loads all plugins enabled in the player configuration. Plugins which do not have an UI configuration option in the player configurator, for example the google-analytics, comscore, fas or cuepoints plugins, are activated by importing their ESM module and registering it with flowplayer(plugin) before you create the player:

<div id="player-<videoid>"></div>
<script type="module">
  import flowplayer from "https://embed.flowplayer.com/<player id>/<videoid>.js";
  import cuepoints from "https://cdn.flowplayer.com/releases/native/3/stable/esm/plugins/cuepoints.min.js";

  flowplayer(cuepoints);
  flowplayer("#player-<videoid>", {});
</script>

Load the plugins from the same release channel or version as the player. The plugins: configuration option only works in legacy async embeds.