Skip to main content
Version: 1.x

Player

Type: Component

This component extends the Standard Player and exposes its API so it can be accessed directly from this component.

Standard Player API Differences

  • useNativeView, useNativeControls and useNativeCaptions default to false.
  • canSetPoster, canSetTracks and canSetTrack now check for both plugin and provider support.

Store#

All props below are powered behind the scenes by a store. They are plain JS objects that contain a subscribe function and an optional set function. You can subscribe to receive updates of some value as it changes over time. The subscribe function returns an unsubscribe function that you can call to stop listening.

info

In addition to the props listed below, all props listed in the Standard Player API are also available via getStore.

Usage#

// All props below are available here.
const { paused } = player.getStore();
const unsubscribe = paused.subscribe(isPaused => {
console.log('paused state changed to:', isPaused);
});
// ...
unsubscribe();

Props#

locale#

Type: string | Default: en

Determines the current language preference.

languages#

Type: { [localeId]: { [id]: string } } | Default: { en }

Translation maps that the player uses when the locale changes.

i18n#

Type: { [id]: string } | Default: english map

Contains the current language map. It's basically languages[locale] under the hood. If the current locale has no language map, it'll fallback to en.

icons#

Type: { [id]: string } | Default: {}

Icons are expected to be loaded as an SVG sprite that is inserted into the head of the document. The icons prop is a collection of icon identifiers and the value of the corresponding SVG elements id attribute.

theme#

Type: string|object|null | Default: null

Used to style the player, under the hood it uses CSS custom properties. It can be a string to set the primary color of the player, or an object that contains a collection of available CSS vars and their corresponding values.

class#

Type: string | Default: null

CSS classes to be applied to the root player element.

plugins#

Type: Plugin[] | Default: []

The current list of plugins that the player has installed.

debug#

Type: boolean | Default: false

Whether the player is in debug mode or not. If true, messages are sent to the console.

isMobile#

Type: boolean | Default: false

Whether the player is in mobile mode or not. This is true if the device is determined to be a mobile device via the User-Agent.

isTouch#

Type: boolean | Default: false | Readonly: true

Whether the user is currently using touch input. This is actively updated by listening to the touchstart and mousemove events.

isContextMenuEnabled#

Type: boolean | Default: false

Whether the context menu (right click on player) can be opened or not. In development mode this is enabled regardless of what value this is set to.

currentPoster#

Type: string|null | Default: null | Readonly: true

The current poster, either a custom poster or the native one if available.

hasControls#

Type: boolean | Default: false | Readonly: true

Whether there are controls available via a plugin, or the native controls are being used.

hasCaptions#

Type: boolean | Default: false | Readonly: true

Whether there are captions available via a plugin, or the native captions are being used.

hasSettings#

Type: boolean | Default: false | Readonly: true

Whether settings are available via a plugin, or the native controls are being used and have settings available.

Methods#

getEl#

Return Type: HTMLElement

The root player element.

getRegistry#

Return Type: Registry

The root player registry.

getStandardPlayer#

Return Type: StandardPlayer

The underlying StandardPlayer instance.

getPluginsManager#

Return Type: PluginsManager

The core PluginsManager.

getPluginsRegistry#

Return Type: Registry

The Registry owned by the PluginsManager.

info

Alternative to player.getPluginsManager().getRegistry().

dispose#

Parameters: (cb: () => void)

Calls the provided cleanup function when the player is being destroyed.

createRegistry#

Parameters: (id: string) | Return Type: Registry

Creates a new Registry, registers it with the root player registry and returns it. This method is generally used by plugins.

createLogger#

Parameters: (id: string) | Return Type: { log: fn, warn: fn, error: fn }

Returns an object with functions that format and forward messages to the respective console method. This method is generally used by plugins.

Events#

info

Vime only has some basic events below because state change updates are received via stores. Whether it's currentTime changes, fullscreen changes, or for any player state change, we subscribe to the respective store for updates.

// Start listening.
const off = player.$on('someEvent', e => {
const data = e.detail;
});
// Stop listening.
off();

mount#

Data Type: undefined

Fired when the player has mounted the DOM and the initial list of plugins have been installed.

destroy#

Data Type: undefined

Fired when the player is removed from the DOM.

pluginmount#

Data Type: { id: string, plugin: Component }

Fired when a plugin has mounted the DOM and attached to the player.

plugindestroy#

Data Type: string (The id of the destroyed plugin)

Fired when a plugin has been destroyed, removed from the DOM and deattached from the player.

error#

Data Type: any

Emits provider and plugin errors.