The Blue Billywig Player API exposes a wide range of methods. The list below covers all methods that can be called on the player API object.
1.0 | Transport
1.1 | on(eventType, handler)
Attach an event handler for events fired by the player, in the same way as jQuery’s .on() does.
Arguments
| Key | Type | Value |
|---|---|---|
| eventType | string | One or more space-separated event types and optional namespaces. |
| handler | function | A function to execute when the event is triggered. |
1.2 | off(eventType)
Detach an event handler from events fired by the player. Please refer to the jQuery documentation for more information.
Arguments
| Key | Type | Value |
|---|---|---|
| eventType | string | One or more space-separated event types and optional namespaces. |
1.3 | load(params)
Load a clip.
Arguments
| Key | Type | Value |
|---|---|---|
| type | string | 'LoadParams' |
| clipId | number | Clip ID from the VMS. |
| cliplistId | number | Clip list ID from the VMS. |
| xmlUrl | string | URL to a valid XML playout file. |
| seekTo | number | The time at which the player should start playing, in seconds. |
| autoPlay | boolean | Whether the player should autoplay when loaded. |
| token | string | A session token to pass to the loaded clip. |
| useSession | boolean | Whether the player should use the browser session to load new clips. |
1.4 | play(userAction)
Play the loaded video.
Arguments
| Key | Type | Value |
|---|---|---|
| userAction | boolean | true if called in response to a user action (optional). |
Returns
| Type | Value |
|---|---|
boolean | Returns true on success, false on failure. |
1.5 | pause()
Pause the video.
Returns
| Type | Value |
|---|---|
boolean | Returns true on success, false on failure. |
1.6 | seek(positionInSeconds)
Seek the video to a specific position.
Arguments
| Key | Type | Value |
|---|---|---|
| positionInSeconds | number | The position to seek to, in seconds. |
Returns
| Type | Value |
|---|---|
boolean | Returns true on success, false on failure. |
2.0 | Setters
2.1 | setVolume(volume)
Set the master volume, including any Picture-in-Picture widgets on the timeline.
Arguments
| Key | Type | Value |
|---|---|---|
| volume | number | A number between 0 and 1. |
Returns
| Type | Value |
|---|---|
boolean | Returns true on success, false on failure. |
2.2 | setMuted(muted, reserved, userAction)
Set the master mute state, including any Picture-in-Picture widgets on the timeline.
Arguments
| Key | Type | Value |
|---|---|---|
| muted | boolean | true to mute the player, false to unmute. |
| userAction | boolean | true if called in response to a user action (optional). |
Returns
| Type | Value |
|---|---|
boolean | Returns true on success, false on failure. |
2.3 | setProgramVolume(volume)
Set the volume for the main video only.
Arguments
| Key | Type | Value |
|---|---|---|
| volume | number | A number between 0 and 1. |
Returns
| Type | Value |
|---|---|
boolean | Returns true on success, false on failure. |
2.4 | setAsset(assetId)
Switch the asset for the current video.
Arguments
| Key | Type | Value |
|---|---|---|
| assetId | number | An asset ID matching one from getAssets(). |
Returns
| Type | Value |
|---|---|
boolean | Returns true on success, false on failure. |
2.5 | setFitMode(fitMode)
Fit mode settings determine how video content fits within the player when the aspect ratios differ. Read more about Fit mode settings.
Arguments
| Key | Type | Value |
|---|---|---|
| fitMode | string | FIT_SMART, FIT_BOTH, FIT_OVERSCAN, FIT_NATIVE, FIT_STRETCH, FIT_VERTICAL, FIT_HORIZONTAL |
Returns
| Type | Value |
|---|---|
boolean | Returns true on success, false on failure. |
2.6 | setLocalStorageItem(key, value)
Write an entry to LocalStorage, if permitted by the current cookie settings.
Arguments
| Key | Type | Value |
|---|---|---|
key | string | The LocalStorage key. |
value | string | The value to store. |
Returns
| Type | Value |
|---|---|
boolean | Returns true on success, false on failure. |
2.7 | setSubtitle(subtitleId)
Set the active subtitle track.
Arguments
| Key | Type | Value |
|---|---|---|
| subtitleId | number | The subtitle ID, as found in the subtitle object returned by getSubtitlesList(). |
2.8 | setInView(inView)
Override the player’s in-view state.
Arguments
| Key | Type | Value |
|---|---|---|
| inView | boolean? | The forced in-view state, or null to remove the override. |
2.9 | setRelatedItems(items)
Override the related items shown in the player.
Arguments
| Key | Type | Value |
|---|---|---|
| items | array? | An array of content item objects, or null to clear. |
Item object properties
| Key | Value |
|---|---|
| id | string — Unique identifier of the media clip (required). |
| title | string — Media clip title (optional). |
| type | string — Item type: "MediaClip", "Project", or "MediaClipList" (optional). |
| mediatype | string — Media type: "audio", "video", "interactive", "mainroll", or "image" (optional). |
| length | integer — Duration in seconds (optional). |
| sourcetype | string — Source type: "on_demand" or "live" (optional). |
| deeplink | string — Deeplink URL of the item (optional). |
| gendeeplink | string — Dynamically generated deeplink URL of the item (optional). |
Example
playerAPI.setRelatedItems([
{ id: "1234567" },
{ id: "9876543" },
{ id: "3456789" }
]);3.0 | Getters A – C
3.1 | getAssets()
Returns an array of asset objects available for the current clip on the current device.
Returns
| Type | Value |
|---|---|
array | An array of asset objects. See getCurrentAsset() for the object structure. |
3.2 | getBuffered()
Returns the buffered ranges of the main clip. Multiple ranges can be buffered as a result of seeking.
Returns
| Key | Type | Value |
|---|---|---|
| start | array | Start positions of all buffered ranges, in seconds. |
| end | array | End positions of all buffered ranges, in seconds. |
| length | number | The number of buffered ranges. |
Example
var buffered = playerAPI.getBuffered();
for (var i = 0; i < buffered.length; i++) {
var start = buffered.start[i];
var end = buffered.end[i];
}3.3 | getCastSource()
Returns the source URL for casting.
3.4 | getChapterList()
Returns an array of chapter objects set for the current clip in the Timeline editor.
Returns
| Key | Type | Value |
|---|---|---|
| id | number | The ID of the chapter. |
| title | string | The chapter title as set in the Timeline editor. |
| description | string | The chapter description as set in the Timeline editor. |
| timeOffset | number | The time at which the chapter starts, in seconds. |
3.5 | getClipData()
Returns all data for the current clip. Use the browser console to inspect the returned object:
console.log(playerAPI.getClipData());if (typeof clipData.title !== 'undefined') {
setTitle(clipData.title);
}3.6 | getContentLayer()
Returns the content layer DOM element. Useful when resizing the content area (video, timeline, and subtitles) to show a description panel or related clips.
Returns
| Type | Value |
|---|---|
element | The content layer DOM element. |
3.7 | getCurrentAsset()
Returns an object describing the currently active asset.
Returns
| Key | Type | Value |
|---|---|---|
| id | number | The asset ID. |
| mediatype | string | The media type of the asset, e.g. MP4_MAIN or MP4_IPOD. |
| title | string | A label that can be used for a quality selector button. |
| bitrate | number | The bitrate of the asset. |
| classes | string | CSS classes that can be applied to a quality selector button for this asset. |
| width | number | The width of the asset in pixels. |
| height | number | The height of the asset in pixels. |
3.8 | getCurrentSubtitle()
Returns an object describing the currently active subtitle track.
Returns
| Key | Type | Value |
|---|---|---|
| id | number | The ID of the subtitle track. |
| languageid | number | The language ID of the subtitle track. |
| name | string | The display name of the subtitle track (e.g. Dutch or German). |
| languagename | string | The localised name of the subtitle track (e.g. Nederlands or Deutsch). |
| default | boolean | true if this is the default subtitle track, false otherwise. |
| isocode | string | The ISO 639-1 language code. |
| status | string | The status of the subtitle track: published or draft. |
| parsedData | array | An array containing all subtitle lines. |
3.9 | getCurrentSubtitleLine()
Returns the currently displayed subtitle line.
Returns
| Type | Value |
|---|---|
string | The current subtitle line, which may contain HTML formatting. |
3.10 | getCurrentTime()
Returns the current playback position of the main clip.
Returns
| Type | Value |
|---|---|
number | The current playback position in seconds. |
4.0 | Getters D – L
4.1 | getDeeplink()
Returns the deep link of the current clip as configured in the VMS.
Returns
| Type | Value |
|---|---|
string | The formatted deep link URL. |
4.2 | getDetections()
Returns the detections object. Refer to the detections documentation for available properties and methods.
4.3 | getDuration()
Returns the duration of the main clip.
Returns
| Type | Value |
|---|---|
number | The duration in seconds. Returns null for static clips. |
4.4 | getEmbedcode([width], [height])
Returns the embed code for the current clip, with an optional width and height override.
, [height] )” id=”” class=”” style=”” ]
Arguments
| Key | Type | Value |
|---|---|---|
| width | number | The width in pixels of the embedded player (optional). |
| height | number | The height in pixels of the embedded player (optional). |
Returns
| Type | Value |
|---|---|
string | A formatted embed code. |
4.5 | isFullscreen()
Returns whether the player is currently in fullscreen mode.
Returns
| Type | Value |
|---|---|
boolean | true if the player is fullscreen, false otherwise. |
4.6 | getLocalStorageItem(key)
Returns the value of a LocalStorage entry.
Arguments
| Key | Type | Value |
|---|---|---|
| key | string | The LocalStorage key. |
Returns
| Type | Value |
|---|---|
mixed | The stored value, or undefined if the key does not exist. |
4.7 | getLogo()
Returns the logo configuration for the active playout.
Returns
| Key | Type | Value |
|---|---|---|
| position | string | The position of the logo, e.g. TOPRIGHT. |
| url | string | The URL the logo links to. |
| src | string | The URL of the logo image. |
| id | string | The ID of the clip used as the logo. |
5.0 | Getters M – R
5.1 | getMode()
Returns the current mode of the player.
Returns
| Type | Value |
|---|---|
string | One of the following: static, commercial, audio, video, presentation, live-audio, live-video. |
5.2 | getMuted()
Returns the current master mute state.
Returns
| Type | Value |
|---|---|
boolean | true if muted, false if unmuted. |
5.3 | getPhase()
Returns the current phase of the player.
Returns
| Type | Value |
|---|---|
string | One of the following: INIT, PRE, MAIN, POST, EXIT. |
5.4 | isPlaying()
Returns whether the player is currently playing.
Returns
| Type | Value |
|---|---|
boolean | true if the player is playing, false otherwise. |
5.5 | getPlayoutData()
Returns all playout settings from the VMS. Similar to getClipData(), but returns playout-level data.
5.6 | getProjectData()
Returns all project metadata. Similar to getClipData(), but returns project-level data.
5.7 | getRelatedClips()
Returns an array of clip objects related to the active clip.
6.0 | Getters S – Z
6.1 | getSharing()
Returns an array of social sharing objects for the current clip.
Returns
| Key | Type | Value |
|---|---|---|
| id | number | The ID of the sharing item. |
| name | string | A machine-readable identifier for the sharing channel. |
| title | string | A human-readable name for the sharing channel. |
| url | string | A formatted URL pointing to the share page of the social network. |
6.2 | getSkinLayer()
Returns the skin container DOM element. Useful for finding HTML elements within the player skin.
Returns
| Type | Value |
|---|---|
element | The skin container DOM element. |
6.3 | getSubtitleLayer()
Returns the subtitle layer DOM element. Useful when implementing custom subtitle rendering in the skin.
Returns
| Type | Value |
|---|---|
element | The subtitle container DOM element. |
6.4 | getSubtitlesList()
Returns an array of subtitle track objects for the current clip.
Returns
| Type | Value |
|---|---|
array | An array of subtitle objects. See getCurrentSubtitle() for the object structure. |
6.5 | getThumbnail(clipId, [width], [height])
Returns a URL to the thumbnail for a specified clip, optionally at a given size.
, [height] )” id=”” class=”” style=”” ]
Arguments
| Key | Type | Value |
|---|---|---|
| clipId | number | The clip ID. |
| width | number | The desired thumbnail width in pixels. Defaults to the original width (optional). |
| height | number | The desired thumbnail height in pixels. Defaults to the original height (optional). |
Returns
| Type | Value |
|---|---|
string | The URL of the thumbnail image. |
6.6 | getVolume()
Returns the current master volume. Use this after a volumechange event to read the updated value.
Returns
| Type | Value |
|---|---|
number | The master volume as a number between 0 and 1. |
Example
playerAPI.on('volumechange', function(){
var volume = playerAPI.getVolume();
});
playerAPI.setVolume(0.5);6.7 | getWrapper()
Returns the player wrapper DOM element.
Returns
| Type | Value |
|---|---|
element | The wrapper DOM element. |
7.0 | Interface
7.1 | showInterfaceElement(elementName)
Shows the specified interface element. Available elements:
controlBarplayPauseButtonprogressBartimeDisplaymuteButtonvolumeSliderlanguageButtonhdButtonfullscreenButtonshareButton
Arguments
| Key | Type | Value |
|---|---|---|
| elementName | string | A valid element name (see list above). |
7.2 | hideInterfaceElement(elementName)
Hides the specified interface element.
Arguments
| Key | Type | Value |
|---|---|---|
| elementName | string | A valid element name. See showInterfaceElement() for the list of available elements. |
7.3 | enableInterfaceElement(elementName)
Enables the specified interface element.
Arguments
| Key | Type | Value |
|---|---|---|
| elementName | string | A valid element name. See showInterfaceElement() for the list of available elements. |
7.4 | disableInterfaceElement(elementName)
Disables the specified interface element.
Arguments
| Key | Type | Value |
|---|---|---|
| elementName | string | A valid element name. See showInterfaceElement() for the list of available elements. |
7.5 | showCastTargetPicker(type)
Shows the cast target picker, if available.
Arguments
| Key | Type | Value |
|---|---|---|
| type | string | The cast type: 'AirPlay' (default) or 'ChromeCast'. |
8.0 | Miscellaneous
8.1 | fullscreen()
Enter fullscreen mode.
8.2 | retractFullscreen()
Exit fullscreen mode.
8.3 | toggleFullscreen()
Enters fullscreen mode when the player is not fullscreen, and exits fullscreen when it is.
8.4 | playAdTag(params)
Instructs the player to request and play an ad tag. When params.phase is set to "PRE" or "POST", the player requests the tag the next time it enters that phase. If multiple playAdTag calls are made for the same phase, the player works through each tag in order until one fills, then clears all tags for that phase.
When params.phase is "MAIN", the player will either:
- Request the tag immediately and interrupt the content if it is currently in the
MAINphase and notimeparameter was provided. - Schedule the request at the specified time offset and interrupt content when that offset is reached.
- Schedule the request and interrupt content the moment the player starts playing, if it is not yet in the
MAINphase.
Arguments
| Key | Type | Value |
|---|---|---|
| params | object | Parameters object. Either params.vastUrl or params.vastXml is required. |
| params.phase | string | The phase in which to request the ad: "PRE", "MAIN", or "POST". Defaults to "MAIN". |
| params.time | number | Time offset in seconds within the MAIN phase at which the ad should be requested (optional). |
| params.vastUrl | string | The VAST URL to request. If both vastUrl and vastXml are provided, vastUrl takes precedence. |
| params.vastXml | string | The VAST XML to request. If both vastUrl and vastXml are provided, vastUrl takes precedence. |
Returns true if the request was successfully scheduled, false otherwise.
8.5 | destruct()
Destructs the player, freeing up memory and removing its elements from the DOM.