Standard Player

The Standard Player is used to interact with a provider/embed through the core Vime player interface. If you'd like to know what features it includes and how it compares to other options then see the getting started page.

Installation

NPM

npm install @vime-js/standard

Yarn

yarn add @vime-js/standard

JSDELIVR

<script src="https://cdn.jsdelivr.net/npm/@vime-js/standard"></script>

The dist folder inside the package contains multiple exports:

• standard.js is a UMD development build that can be used directly in the browser via the <script> tag.
• standard.esm.js is intended for use with modern bundlers like Webpack or Rollup.
• standard.min.js is a UMD production build that can be used directly in the browser via the <script> tag.
• standard.esm.min.js is an ESM production build that can be used directly in modern browsers via the <script type="module"> tag.

info

• 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

// All providers are named {ProviderName}Provider.

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

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: {

src: '/media/my-video.mp4',

providers: [FileProvider, YouTubeProvider],

},

});

// ...

// Destroy

player.$destroy();

info

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

Svelte

<Player src="/media/my-video.mp4" {providers} bind:this="{player}" />

<script>

import { onMount } from 'svelte';

// All providers are named {ProviderName}Provider.

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

let player;

const providers = [FileProvider, YouTubeProvider];

onMount(() => {

/**

* If you need to call any methods, you have access

* to the player instance here.

**/

});

</script>

Where to next?

• See the provider notes page for any provider specific issues or features, and then go to the API section to find out how to interact with the player.
• See the loading media guide to see how you can set the src prop.