Playouts

By embedding a mediaclip using a playout, you can customize the player to your specific needs. The following configuration options are available:

Dimensions

The playout is rendered in the specified width and height. These values can be absolute numbers (in pixels), or percentages.

Absolute dimensions

A non-percentage value will always result in a player with a static width and height as specified. This is the most basic configuration and is recommended for novice users.

Relative dimensions

Using a percentage for the width and height, it is possible to create a responsive player. A player with the size in percentages will act like any other HTML element with the size in percentages. A player with 100% width and 100% height will fill its containing element. This way, a web developer can control the player dynamicly by adjusting its parent container. Please make sure your containing element has a height set. By default, a div element without a height set with a 100% player in will not be visible since it's height will be 0.

Responsive sizing

This option makes the player overwrite height values in the playout settings. It sets the width of the player to 100% and calculates the height with it's width and the aspect ratio of the video. This feature is useful for responsive websites where the width of the player is variable.

Although this feature is very powerful in responsive websites, we recommend it only to expert users.

Color

The player and its skin can be configured in any color. There are 4 colors that can be adjusted:

  • Background color / opacity controls the color and opacity of the control bar, popup windows and the title display background
  • Foreground color, controls the color of text and icons
  • Widget color, controls the accent color of widgets, like the progress in the progress bar
  • Player background color, controls the background color of the player

Logo

An overlay for a logo can be created, by uploading an image, or selecting a previously uploaded one. The you can specify the alignment of the logo, and optionally make it clickable by supplying an url.

Control bar

The control bar has three options (autohide, show and hide) which control the visibility of the entire control bar. The visibility of the seperate elements in the control bar can be individually controlled:

Time

  • Should the player show the time, and if so in which format
  • Should the player show a progress bar

Volume

  • Should the player show a mute button
  • Should the player show a volume slider, and if so, in what orientation

Note: The volume control / mute button is not supported on the iPad and most other mobile devices.

Buttons

You can specify if the player should display the following buttons:

  • Language select: When subtitles or captions are available this button will allow the user to select a different language
  • Playback quality selector: This allows the user to select a different playback quality
  • Audio track selector: When multiple audio tracks are available this button will allow the user to select a different audio track
  • Full screen button: Will show a button which will attempt to go fullscreen when pressed. If fullscreen is not supported by the browser it will fill up the browser space (full browser)
  • Share button, this enables the viewer to share the video on social web sites

Start and end screen

Every video has an end screen and (if autoplay has not been enabled) a start screen

Start screen

The start screen can be customised to show a big play button, and the media clip's meta data (like the title, author and copyright information)

End Screen

The end screen can display a list of related items. The following options are available

  • Randomize related items
  • Related clips will be instantly loaded inside the current player, but it is possible to link these clip to a specific deeplink page
  • The related clips can be further controlled with a custom clip list for related items. You can select a (dynamic) cliplist which will be displayed, randomly if wanted.

Sharing

The following options are available for sharing the video

  • Use deep link for social links: the viewer will share the specified deep link instead of the current URL the user is watching the video on. This allows the creation of a specific video page with corresponding OG Graphs for Facebook embedding
  • Share Twitter text: this text will be placed before the video URL when clicking the Twitter share button
  • Playout used for sharing: optionally, you can specifiy a different playout to use when the viewer shares the video

Auto options

The player can be customized to certain behaviour, like autoplay (automatically play the video when the player loads), automute (mute the player when loaded) and autoloop (loop the clip or entire cliplist).

In and out view

The in and out view option plays or/and unmutes the video when the video player scrolls into our of of the current view. For example, a player is embedded halfway through an article but is not visible directly when the user arrives on a page. When the user scrolls down to read more of the article, the player comes into view and can start playing.

Some mobile devices, like an iPhone, don't support inline playing of video by default. The configured in and out view actions are disabled by default on those devices. If you are sure you want to enable them, you can do so by enabling the "force in and out view actions" option. Exceptions are assets encoded using our "image sequence" profile, which can be player inline on an iPhone, and where view actions are not disabled by default.

Keyboard

By default, the player will react to keyboard controls. You can disable these controls by checking the "Disable keyboard controls" option.

You can see which keys you can use to control the player here

Mouse

The Mouse options utilize the mouse interaction with the player. When the user hovers the mouse over or away from the player, it can mute/unmute and/or start/stop playing. When the user clicks the player, a link can be opened in the current window, or a new one.

Placement options

You can specify the location on your web site the player should be placed. The following options are available:

  • Default: Place the player directly after the position of the embed script.
  • Place the player directly after the first element matching the specified DOM-Selector
  • Place the player after the number of items matching the DOM-Selector divided by two, rounded down. Example: When 7 elements match the selector, the banner will be placed after the 3rd element.
  • Below the webpage “fold”. This means it will place the player after the first element that is not completely visible without scrolling. If none of the elements is below the fold, the player will not be placed.
  • Below the fold, with the exception that it will be placed after the last element found, if none of the matching elements is under the fold.

No sound influence

On some devices the player will be unable to influence the sound/volume settings of the device. Mobile devices that currently do not support sound influence are:

  • All iOS devices including iPad, iPhone and iPod Touch
  • Most Android devices running Android 2.x
  • Devices running on Windows Mobile Phone

Mobile devices that currently do support sound influence are:

  • Windows Surface RT
  • Most Android devices running Android 4.x or higher

For devices with "no sound influence" we introduced options which come in handy when using ad services

  • Disable autoplay and inview actions: this will disable the player from automatically start playing from any situation, i.e. autoplay is turned on, or inview/mouse hover is set to start the player.
  • Disable player placement entirely: this will not place the player at all.

Custom code

You can specify custom Javascript code which will be executed when the player is displayed. References you can use * $$api, the player's api * $$wrapper, the DOM node the player is rendered in

Fitmode

The fitmode specifies how the video is rendered in the available space

  • Smart: the recommended and default option, a smart combination of stretching and letterboxing
  • Native: play the video in the exact dimensions of the videofile
  • Fit vertical: fit in the vertical direction
  • Fit horizontal: fit in the horizontal direction
  • Fit both: fit in both horizontal and vertical direction
  • Stretch: stretch in both horizontal and vertical direction
  • Cover (overscan): cover both horizontal and vertical direction with overscan

Playback preferences

You can configure various settings which influence the skin behaviour. By default, not all of these options are available. For more information, please contact our support team.

  • Use Blue Billywig skin
    • Auto: Skin is disabled when inline playback is not supported
    • Disable on touch: skin is disabled for mobile touch devices
    • Always disable: skin is disabled for all devices.

Note: when the skin is disabled, all timeline interactions are disabled too, unless the "Blue Billywig skin for timeline clips" is enabled

You can choose to use the native browser controls when the skin is disabled

When you have imported or exported your content to YouTube, you can turn on Enable YouTube playback to play the content from YouTube in our player.

Our player tries to select the best asset based on the user's bandwith and previously selected playback quality. To do this we will do a bandwith check before playing content. When the bandwidth is not yet determined (often the case when autoplay is turned on) you can use the setting Prefer HD to let the player to start with an asset which is at least 720p.

Developer options

You can enable comScore logging by supplying an URL for comScore logging.

You can enable Google Analytics or Piwik logging by supplying the appropiate information. Please contact our support team for more information on this option.

If you require a cookieless player, you can control the cookies set by the player with Disable Cookies. Tracking cookies are cookies which allows the tracking of a user through different videos. Other cookies are for player functinality, like remembering the volume a user sets.