Skip to main content
Version: 1.x

Player

Type: Component

Props#

src#

Type: string|null | Default: null

Used to locate a media resource to load.

info

See our guide on how to set this prop.

providers#

Type: Provider[] | Default: []

The list of providers available to the player. A Provider tells the player how to embed media from a specific provider. They are imported from the package under the name {ProviderName}Provider.

params#

Type: object | Default: {}

The parameters you'd like to pass to the player. These are encoded and appended to the embed URL.

Player Parameters:

cookies#

Type: boolean | Default: false

Whether cookies should be enabled on the embed or not. This currently only works for YouTube.

aspectRatio#

Type: string|null | Default: 16:9

The aspect ratio of the player expressed as width:height.

ignoreDefaultParams#

Type: boolean | Default: false

Whether any default parameters passed to the embed by Vime should be ignored. Default parameters are only passed in to resolve any visual or functional issues between the embed and Vime.

hasWrapper#

Type: boolean | Default: true

Whether the player should be loaded lazily with a set aspect ratio. If the wrapper is removed then lazy loading is disabled and the player stretches to fill its first parent element with a relative position.

Methods#

getOrigin#

Return Type: string|null

Where the src request had originated from without any path information.

getEmbed#

Return Type: Embed

The underlying Embed instance.

getEmbedURL#

Return Type: string|null

The URL used to embed the current media.

getProvider#

Return Type: Provider|null

The currently active provider. The provider becomes active if it recognizes the current src.

getMediaId#

Return Type: string|null

The id used by the current provider to locate the media resource. For YouTube this would be the videoId.

getTitle#

Return Type: string|null

The title of the current media.

sendCommand#

Parameters: (command: string, args: any, force: boolean)

Sends commands to the embed via postmessage. These commands are sent through when the media is ready for playback, however you can force the command to be sent through immediately. The way this method is used depends on the respective provider.

Traditional Player SDK's abstract this away for you at the cost of size, however it's really easy to use. We have a quick primer for each provider to get you started. If you find any of this uncomfortable, then consider our Standard Player (~10 kB heavier) to abstract this all away for you.

Events#

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

load#

When the embed has initially loaded but it is not ready for playback.

ready#

When the media has loaded and is ready for playback.

message#

Data Type: string

When messages are posted from the iframe that contains the embedded player via postmessage.

data#

Data Type: object

Similar to the messsage event, except data is decoded into a POJO. This is most likely the main event you'll be interacting with. This is where you'll receive updates on the state of the player, or the response to any commands you send through. We have a quick primer for each provider to get you started.

embedurlchange#

Data Type: string|null

When the embed URL for the current media changes.

originchange#

Data Type: string|null

When the origin where the src is being requested from changes.

rebuild#

Similar to srcchange, but only fired if src is not null. This is mainly used to be notified of changes to params.

titlechange#

Data Type: string|null

When the title of the media changes.

error#

Data Type: any (contains more information about the error)

When an error occurs with the intial setup of the player.