Setup

The Lite Player is used to embed media content. If you'd like to know what features it includes and how it compares to other options then see the getting started page.

Vime 2 is now out which is a complete rewrite towards Web Components. Vime 1 will not be receiving any more updates, so we strongly recommended you start with or migrate over to Vime 2 today.

Installation

NPM
YARN
UNPKG
JSDELIVR
NPM
npm install @vime-js/lite
YARN
yarn add @vime-js/lite
UNPKG
<script src="https://unpkg.com/@vime-js/lite"></script>
JSDELIVR
<script src="https://cdn.jsdelivr.net/npm/@vime-js/lite"></script>

The dist folder inside the package contains multiple exports:

  • lite.js is a UMD development build that can be used directly in the browser via the <script> tag.

  • lite.esm.js is intended for use with modern bundlers like Webpack or Rollup.

  • lite.min.js is a UMD production build that can be used directly in the browser via the <script> tag.

  • lite.esm.min.js is an ESM production build that can be used directly in modern browsers via the <script type="module"> tag.

  • UMD builds are exported under the Vime namespace.

  • If you're using a bundler then it will automatically pull in the correct files.

  • If you're using svelte-loader or rollup-plugin-svelte then you'll receive the uncompiled components.

Setup

JavaScript
Svelte
JavaScript
import { Player } from '@vime-js/lite';
const target = document.getElementById('player-target');
// Mount
const player = new Player({
target,
// If you'd like to initialize any props on setup, you can do so here.
props: {
}
});
// ...
// Destroy
player.$destroy();

See the client-side component API for the complete set of component initialization options.

Svelte
<Player bind:this={player} />
<script>
import { onMount } from 'svelte';
import { Player } from '@vime-js/lite';
let player;
onMount(() => {
/**
* If you need to call any methods, you have access
* to the player instance here.
**/
});
</script>

Where to next?

The usage page will guide you on how to get started with any provider, after that go to the API page to see what props/methods/events are exposed and how you can interact with them.