Version: 1.x

Lite Usage

YouTube#

JavaScript
Svelte

import { Player, YouTubeProvider } from '@vime-js/lite';

const target = document.getElementById('player-target');

// Mount
const 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]);

// ...

// Destroy
off();
player.$destroy();

info

For all available commands see the YouTube API Reference.

Vimeo#

JavaScript
Svelte

import { Player, VimeoProvider } from '@vime-js/lite';

const target = document.getElementById('player-target');

// Mount
const 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');

// ...

// Destroy
off();
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

For all available commands see the Vimeo API Reference.
For all available events see the Vimeo Events Reference. :::

Dailymotion#

JavaScript
Svelte

import { Player, DailymotionProvider } from '@vime-js/lite';

const target = document.getElementById('player-target');

// Mount
const 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]);

// ...

// Destroy
off();
player.$destroy();

For all available commands see the Dailymotion API Reference.
For all available events see the Dailymotion Events Reference. :::