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