Blue Billywig Player

Blue Billywig features a default player which is easy to customize, can be controlled by Javascript and displays on all most-used browsers and devices.

Keyboard Controls

The keyboard can be used to control the player. In order to not interfer with other elemens on the website, the player only listens to these keys when it is in focus: When the mouse hovers over the player, or when the last click from the user was in the player (just like using regular text fields on a web page). The specific keys that are used are listed below.

Key Action
spacebar Play / pause
m Mute / unmute
arrow right Forward 10 seconds
arrow left Rewind 10 seconds
arrow up Increase volume with 20%
arrow down Decrease volume with 20%

Embedding - Advanced topics

4.1 Embed-Code Parameters

Most playout settings can be overridden by embed-code parameters.

Moreover, a selected subset of settings can be made exclusively by using an embed-code parameter. They are:

Name Type Value
dfp_adunit_l1 String level-1 ad unit *
dfp_adunit_l2 String level-2 ad unit *
dfp_adunit_l3 String level-3 ad unit *
dfp_adunit_l4 String level-4 ad unit *
dfp_adunit_l5 String level-5 ad unit *

4.1.1 Embed-Code Parameters for Commercial Targeting

Often when targeting commercials, custom macros are needed. Since v5.35, the player implements this facility, substituting %%<key>%% with the value part of the macro_<key>=<value> embed-code parameter.

An example: If we have an ad tag url
https://testsuite.acc.bbvms.com/mediaclip/692.xml?output=vast&targeting=%%foo%%
booked in the preroll position of the default playout, then embedding the player with
https://testsuite.acc.bbvms.com/p/default/c/213.js?macro_foo=bar
results in the player requesting a preroll ad from
https://testsuite.acc.bbvms.com/mediaclip/692.xml?output=vast&targeting=bar.

4.2 Responsive Design

The best way to make the player scale in a responsive design is setting its width and height to '100%' and wrap it inside a <div> that you control the dimensions of.

4.3 Embed dynamically

It is possible to place the player embed script at the bottom of the page and let place the player after a specific element on the page. For further information please refer to the Playout setting "Placement options" (Chapter 2.7.6)

4.4 Just-In-Time Embedding

Sometimes it is more convenient to have the player load on demand, for instance when preloading a player in the background once the page is complete.

Please refer to our Player API page to see an example.

4.5 Embedding using Zones

If your contract allows it, you can wrap your player in a 'zone' and embed the 'zone' using a zone-embed code.

4.6 Embedding on Facebook

To embed your video inline on Facebook, og-tags need to be added besides the player embed code on your website.
More information concerning og-tags can be found in the Public API: External metadata generator documentation.

4.7 Embedding of YouTube-hosted video

As of version 5.38, a dedicated embed code is available for YouTube hosted video. Upon request, designated playouts can be enabled for use with this embed code, which looks like: https://<publication>.bbvms.com/p/<playout>/y/<youtubeId>.html (mind the '/y/' where you would expect '/c/').

Standard Player Playout settings

2.1 Introduction

The Blue Billywig Standard Player – and most of our custom players – can be configured using playouts in the VMS. You can have as many playouts as you want. Playout settings can be overridden in the embed code (using lowercase parameters) - for more information about programmaticly controlling the player, please refer to the Player API Guide.

Some of these settings might not be visible to your user account. Please contact our support team if this is the case or if you would like more information.

2.2 Appearance

2.2.1 Size

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

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

2.2.1.2Responsive sizing

This checkbox makes the player overwrite the width and 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.

2.2.1.3 Relative (percentage) dimensions (responsive player)

With a width and height as percentage, 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.)

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

2.2.2 Color

The player and it's skin can be configured in any color. There are 4 color's that can be adjusted:

Skin Background Color controls the color of the control bar, popup windows and the title display background. The opacity of this background can be adjusted with the Skin Background Opacity slider.

Skin Foreground Color controls the color of text and icons.

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

2.2.3 Logo

The options supplied in this section allow you to set a "Logo" overlay which shows up at the position specified by the "Logo Alignment". You can making it clickable by supplying a "Logo click URL".

2.3 Control Bar

The Controlbar has three settings (Autohide (default), Show and Hide) which control the visibility of the entire controlbar. The visibility of the seperate elements in the controlbar can be individually controlled:

Time

  • Time Display
  • Progress Bar

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

  • Mute Button - This has to be enabled in order for the volume slider to work.
  • Volume slider
  • Volume orientation

Buttons

  • Language Select - This enables or disables the subtitle control button
  • Quality playback Selector - Only visible when multiple assets are available
  • Full Screen Button - Pressing this button will attempt to go (HTML5) fullscreen. When this does not work the player will stretch to the browser's size (fullbrowser)
  • Share Button

2.4 Start- and End screen

Each video features a start screen and end screen. When a playout has autoplay enabled (in options), the start screen will be skipped.

2.4.1 Start screen

The start screen can be customized to show metadata about the mediaclip (like the Author & Copyright information) and a big play button.

2.4.2 End screen

The end screen consists of a list with related items gathered from the VMS. Related items will be picked on similair tags. When no tags are available, random items will be picked from the VMS. Optionally, a random order of items will be displayed when selecting Randomize Related Items.

The related clips can be further controlled with a custom Cliplist for related items. You can select a (dynamic) cliplist which will be (randomly if wanted) displayed.

Related clips will be instantly loaded inside the current player, but it is possible to link these clip to a specific deeplink page. For more information about deeplinks, please refer to the VMS manual.

2.4.3 Automatically play next clip

When the curent clip finishes playing, another clip will be played next after a five second delay. The user will be provided with a screen showing a countdown and an option to cancel this countdown. Pressing cancel will provide the user with the regular endscreen as described above.

2.5 Social/sharing

This tab covers the details about sharing the video on other website's. It's possible to adjust the Share Twitter Text, this text will be placed before the video URL when clicking the Twitter share button.

By checking Use Deeplink For Social Sharing links, the user will share the deeplink specified (or the user's current URL if none specified). This allows the creation of a specific video page with corresponding Open Graph (OG) tags for Facebook embedding. If the option is left unchecked, the player will share the Blue Billywig view page with built-in OG tags. For more information about social sharing, please see Video SEO, OG-tags and microdata.

Sharing targets can be individually enabled, resulting in the apprearance of the appropiate buttons in the sharing drop-up panel in the player. The following options are available: Embed Code, Email, Facebook, Google+, LinkedIn, Pinterest, Twitter

2.6 Options

2.6.1 Playout preferences:

You can influence the Skin behaviour, for more information about this option please contact our support team (by default this option is not visible). Options are:

  • Auto: Skin is disabled when inline playback is not supported
  • Disable on touch: Skin is disabled for mobile touch devices
  • Disable always: Skin is disabled for all devices

Please note: when the Skin is disabled we also turn off all timeline interaction. The "Enable Skin for interactive clips" option allows you to overrule the previous setting to allow the skin to show for interactive clips that have timeline interactivity. When the setting "Native controls when skin is disabled" is enabled, the player will turn on the native device or browser media controls when available.

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. Please contact our support team for more information about this option.

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.

2.6.2 Developer options

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

You can enable Google Analytics logging by supplying an ID for Google Analytics logging (of the form 'UA-xxxxxxxx-x' ). The player will then log "Init", "Play", "Finish", "Replay", and "Progress" events labeled with "<clip_id> - <clip_title>", allowing you to identify individual clips. Furthermore, five standardized dimensions are logged: "dimension1":<clip_id>, "dimension2":<clip_title>, "dimension3":<clip_length_ms>, "dimension4":<clip_sourcetype>, "dimension5":<clip_createddate>. In Google Analytics the data is reported under "REAL-TIME" => "Events" and "BEHAVIOR" => "Events", in categories "Audio" and "Video". Please contact our support team for more information on this option.

Adobe Analytics logging by the player can be enabled via three playout settings: 'Adobe Analytics Tracking Server', 'Adobe Analytics Organization ID' and 'Adobe Analytics Report Suite ID'. All three are required. 

Please contact our support team for more information on this option. (by default it is not visible)

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 video's. Other cookies are for player functinality, like remembering the volume a user sets.

2.7 Behaviour

2.7.1 Auto-options

The player can be customized to certain behaviour, like autoplay (automaticly play the video when the player loads), automute (mute the player when loaded) and autoloop (loop the clip or entire cliplist). When the prefer HD option is selected, the player will select an HD asset when available.

The Preferred playmode (deprecated since player version 5) specifies the technique the player should try first to display the video. Mobile devices do not support Flash, while old browsers like IE8 do not support HTML5 video. Some browsers (Like Google Chrome on Windows or Mac OS X) support both techniques, this option specifies which technique is preferred when both are available. 

It is possible to brand your player with a logo. To add a logo, upload an image to the VMS as creative. by pressing select, a pop-up will appear allowing you to select an image. Toggle the creative switch to display creatives, and select your logo. Logo alignment can be adjusted with the dropdown and a link can be added with the Logo click URL.

2.7.2 In- & Out View

The interactivity tab offers various features that control the player based on user interaction. The In- & Out View option plays or/and unmutes the video when the video player scrolls into 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.

With the floating player option enabled, the player will move to the bottom right of the screen when it isn't in view anymore. This allows users to continue watching videos when they scroll further down the page, increasing engagement and completion rates. Because the player will always be in view when this option is enabled, setting an out-view action is not possible.

For more information about this option please contact our support team.

2.7.3 Miscellaneous

The "Text above player" will allow you to set a text which will show up above the player. Using this option increases the height of the player, so it will no longer be the exact height specified in the playout height set. This option comes in handy when using our videobanner functionalities, i.e. show "Advertisment" above the player.

"Start collapsed" will not show the player untill it starts playing (i.e. by InView triggering a play command).

"Collapse on end" will hide the player once the content has stopped playing.

"Wait for approval" will refrain the player from playing untill it has received a command which explicitly tells it that it is ok to start accepting other commands.

For more information about these options please contact our support team.

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

2.7.5 Sound influence

On some devices the player will be unable to influence the sound/volume settings of the device. For devices with "no sound influence" we introduced the options below which come in handy when using our videobanner functionalities.

Mobile devices that currently do not support sound influence are:

  • All iOs devices including iPad, iPhone and iPod
  • 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

"No sound influence, no autoplay" 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.

 "No sound influence, no player" will not place the player at all.

2.7.6 Placement options

These options come in handy when using our videobanner functionalities. It decides where the player will be placed on the page.

"Attempt iFrame breakout":

When selected, the player will try to break out of the iFrame it is embedded in. This is usefull when using DfP to place the player. It will only work when the iFrame is on the same domain as the parent window. This setting is on by default for videobanners.

"Placement options":

The player will be placed after the element found by the DOM-selector specified. Options:

  • Default: Place the player directly after the position of the embed script.
  • afterSelector/first element: Place the player directly after the first element matching the DOM-Selector
  • halfwaySelectors/halfway elements: 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.
  • fold/under fold only: The placement logic will try to place the player 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.
  • foldOrLast/under fold or last element: Same as above, with the exception that it will be placed after the last element found, if none of the matching elements is under the fold.

"DOM-Selector":

This selector uses jQuery and can use anything jQuery can use. See http://api.jquery.com/category/selectors/ for full documentation. The jQuery library is already included in our player.

Examples:

  • #article-identifier p.paragraph(# is used for the id attribute of dom-elements, . (dot) for the classname. p can be used to select all <p> elements.)
  • div.article p:nth-child(4), div.article p:last(This will select the 4th <p> element within a <div class=”article”> element, and the last <p> element found within the <div class=”article”> element. When used with the Placement option afterSelector/first element the player will be placed after the first element found, so if there are less then 4 <p> elements found, it will be placed after the last <p> element.)

For more information about this option please contact our support team.

2.8 Positions

The "Prefer Flash for Commercials" option specifies the technique the player should try first to display commercials. Mobile devices do not support Flash, while old browsers like IE8 do not support HTML5 video. Some browsers (Like Google Chrome on Windows or Mac OS X) support both techniques, this option specifies which technique is preferred when both are available. For VAST URL's some ad systems do not support CORS headers which results in HTML5 not being able to retrieve these URL's through HTML5. If you are uncertain about this option, leave it enabled or contact our support team.

By default all the controls are turned off during commercials. With the options "Show Play/Pause button for commercials" and "Show Mute/Unmute button for commercials" you can allow these simple controls to be shown. Enter text in "Text Commercial Time Remaining" to show a countdown prefixed by this text. Enter text in "Text Commercial Skin" to show a line of text which upon click results in skipping the commercial. This last option is not yet publicly available, for more information, please contact our support team.

The setting "Play commercials" can be best understood imagining the player is started of with a playlist.

  • If you choose "Once per load", only the first clip in the playlist will show a pre-roll commercial. Then, if in the exitscreen a related clip is clicked, a new clip is loaded into the player. Hence, another pre-roll commercial will be shown.
  • If you choose "Once per session", only the first clip in the playlist will show a pre-roll commercial. Subsequent loads of clips or clip lists do not. (until you refresh the page)
  • If you choose "Once per clip", each clip in the playlist will show a pre-roll commercial. Subsequent loads of clips or clip lists will too.

 

For more information regarding positions, please refer to the Multi Stage Advertising System guide.

Multi-Stage Advertising System

10.1 Positions

The system distinguishes five ad slots called positions:

  • Preroll (audio/video)
  • Leader (audio/video)
  • Overlay (text/image/interactive)
  • Postroll (audio/video)
  • Exitscreen (text/image/interactive)

10.2 Ad Systems

In each of the five positions one or more (hence "Multi-Stage") ad system calls can be booked. The available ad systems are:

  • Creative (type: vms, subtype: generic)
  • DfP (type: vast, subtype: dfp)
  • Videostrip (type: vast, subtype: videostrip)
  • SmartClip (type: vast, subtype: smartclip)
  • ZoomIn (type: vast, subtype: zoomin)
  • OpenX (type: vast, subtype: openx)
  • Dart Legacy (type: vast, subtype: dart)

NOTE: vast systems are compatible with VAST1.0 and VAST2.0

The player recognizes standardized macro's in an VAST ad tag url (for all of the systems above, except Creative). The following macro's can be used:

Macro Explanation Value
[url] The url the player is placed on. If the player is placed in an iFrame and the option "attempt iFrame breakout" is not used, the [url] will be the url of the iFrame. a URL string
[deeplink] The deeplink of the mediaclip (is the same as [url] if not set) a URL string
[timestamp] The timestamp that the VAST request was done. a number
[correlator] Same as [timestamp] a number
[playerwidth] The width of the player in pixels. When responsive sizing is used the width will return the width of the player at the moment of requesting the ad. a number (in pixels)
[playerheight] The width of the player in pixels. When responsive sizing is used the width will return the width of the player at the moment of requesting the ad. a number (in pixels)
[clipTitle] The title of the clip. Only available for in-stream the title string
[clipID] The ID of the clip. Only available for in-stream the ID string
[playmode] The playmode selected by the player. Useful for example when using key/value targeting in combination with DfP "html5" or "flash"
[format] The format selected by the player. Almost the same as playmode, but returns another value. Useful in combination with liverail ( LR_FORMAT ). "application/x-shockwave-flash" or "application/javascript"

They will be replaced with their respective values dynamically before sending the ad request to the ad server.

10.3 Ad Formats:

The player supports the following IAB ad formats:

[Overlay]

  • Half banner (234x60)
  • Full banner (468x60)
  • Leaderboard (728x90)

[Exitscreen]

  • Rectangle (180x150)
  • Medium rectangle (300x250)
  • Large rectangle (336x280)

[Preroll, Leader, Postroll]

  • Fullframe

Tagging

The player supports JSON-LD tagging.

A JSON-LD block is injected in the <head>, containing either a schema.org VideoObject, an schema.org AudioObject, or a schema.org MediaObject, depending on the clip's media type, having the following fields (if applicable):

  • caption
  • duration
  • embedUrl
  • height
  • uploadDate
  • width
  • dateCreated
  • datePublished
  • keywords
  • thumbnailUrl
  • description
  • name
  • url

Administration

At your option, this behaviour can be disabled via a playout setting 'Disable tagging' (under 'Behaviour, Miscellaneous').