Skip to main content
Version: 1.x

Lite Usage

YouTube#

import { Player, YouTubeProvider } from '@vime-js/lite';
const target = document.getElementById('player-target');
// Mountconst player = new Player({  target,  props: {    src: 'youtube/R6MlUcmOul8',    providers: [YouTubeProvider],  },});
// We receive updates on the state of the player here.const off = player.$on('data', e => {  const { info } = e.detail;
  /**   * This will be an object containing all player properties such as   * the currentTime, volume etc.   **/  console.log(info);});
// We interact with the embed via commands.
// Calling method.player.sendCommand('playVideo');
// Setting a property.player.sendCommand('setVolume', [50]);
// ...
// Destroyoff();player.$destroy();
info

For all available commands see the YouTube API Reference.

Vimeo#

import { Player, VimeoProvider } from '@vime-js/lite';
const target = document.getElementById('player-target');
// Mountconst player = new Player({  target,  props: {    src: 'vimeo/154225711',    providers: [VimeoProvider],  },});
/** * To get updates from the player we must call the following * for each event we want to listen to. **/player.sendCommand('addEventListener', 'timeupdate');
// We receive updates on the state of the player here.const off = player.$on('data', e => {  const data = e.detail;  if (!data) return;
  // We extract the event name and payload.  const { event, data: payload } = data;
  if (event === 'playProgress') {    console.log(payload);  }
  // If we call a getter method then this how we get the response.  const { method, value } = data;
  if (method === 'getCurrentTime') {    console.log(value);  }});
// We interact with the embed via commands.
// Calling method.player.sendCommand('play');
// Setting a property.player.sendCommand('setVolume', 50);
// Getting a property.player.sendCommand('getCurrentTime');
// ...
// Destroyoff();player.$destroy();
caution

For some reason the event name you pass to the addEventListener call is not the same as the name that comes through the data event. You can use console.log to figure it out.

info

Dailymotion#

import { Player, DailymotionProvider } from '@vime-js/lite';
const target = document.getElementById('player-target');
// Mountconst player = new Player({  target,  props: {    src: 'dailymotion/x3a9qe6',    providers: [DailymotionProvider],  },});
// We receive updates on the state of the player here.const off = player.$on('data', e => {  const data = e.detail;  const event = data && data.event;  if (!event) return;
  /**   * Data is an object that contains additional info regarding the event.   * If we're listening for timeupdates then data.time would have the   * current time.   **/  console.log(event, data);});
// We interact with the embed via commands.
// Calling method.player.sendCommand('play');
// Setting a property.player.sendCommand('volume', [50]);
// ...
// Destroyoff();player.$destroy();