Creating a player configuration

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

Player configurations have the following options:

• General
  • Hostname restriction
• Appearance
• Behaviour

General

Under the general options you can:

• Set the internal name for the player
• Select the language for the player
• Set the hostname restrictions

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.

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 if 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 between: volume, mute, fullscreen and quality
• Sharing: when at least one option is enabled, the player will show the options to share the video on Facebook, Twitter or a link to either the iframe or the video itself
• Share type: if the share links will point to the parent page (the page where the player is embedded) or the player page itself
• Metadata: set a content title or/and a description. This will be visible to the bottom/left of the splash screen (before the content has started playing)

Behaviour

You can configure the player behaviour in several ways:

• 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'
• 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
  • Float On Scroll: enables the float on scroll plugin which moves the player to the bottom when scrolling
  • Controllable by keyboard: this setting enables the keyboard plugin to enhance the accessibility of the player

• Casting: should Chromecast and/or AirPlay features be turned on. If a device with either of the functionality turned on is in range on the local network, a device selection button will appear. See the airplay and chromecast documentation pages for details.

• Ad schedule: if chosen, the player will show advertising based on your ad schedule
• Recommendations: if enabled the player will show recommendations from your video inventory

Recommendations

You can choose to showcase recommendations after the video is completed by selecting either one of your playlists or using the Automatic option. In that case we automatically provide relevant recommendations to increase your audience engagement.

Advertising

If you subscribe to a 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 programatically 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 example of how to do it.

<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",
      "ima": { "ads": [{
         "time": 0,
         "adTag": "https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&amp;iu=/124319096/external/single_ad_samples&amp;ciu_szs=300x250&amp;impl=s&amp;gdfp_req=1&amp;env=vp&amp;output=vast&amp;unviewed_position_start=1&amp;cust_params=deployment%3Ddevsite%26sample_ct%3Dskippablelinear&amp;correlator=" }] }
    }
  </script>
</div>

Code variables

In above sample codes,

• data-player-id="<player id>" identifies the skinning and behavior configuration you created. You can see the id in the page url when selecting a player design.
• //cdn.flowplayer.com/players/<site id>/native/flowplayer.async.js is the url of the hosted player script, specific to your workspace/site.
• "src": "<videoid>" contains the Flowplayer videoid if it's a remote asset, or "src": "//edge.flowplayer.org/bauhaus.m3u8" is the url to the video stream/file.
• "my_configuration" is a dummy for the various additional player configuration options

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

Likewise, you can activate plugins which do not have an UI configuration option through the plugins: configuration option . Examples would be the google-analytics, comscore, fas or cuepoints plugins.