Customization

This page will guide you on how to extend or customize the player. Refer to the Player API for what props/methods/events are available and how to interact with them.

Loading Providers

Providers are loaded via the providers prop.

// All providers are named {ProviderName}Provider.
import { Player, FileProvider, YouTubeProvider } from '@vime-js/complete';
// ...
const player = new Player({
target,
props: {
providers: [FileProvider, YouTubeProvider]
}
});
  • For all available providers see this page.

  • Checkout the provider notes for any provider specific issues or features.

Loading Plugins

Plugins are loaded via the plugins prop, see the plugins getting started page for more information.

import { Player, Boot } from '@vime-js/complete';
// ...
const player = new Player({
target,
props: {
// The Boot plugin installs all Vime plugins.
plugins: [Boot]
}
});

Loading Icons

Icons are set via the icons prop.

Vime Icons

You can load the default Vime icons by using the Icons plugin.

import { Icons } from '@vime-js/complete';
// If you're using the Boot plugin, it already loads this for you.
player.plugins = [Icons];

Custom Icons

Create an SVG sprite and insert it into the head of the document. You can then override the following default icons.

  • play

  • pause

  • captionsOn

  • captionsOff

  • enterFullscreen

  • exitFullscreen

  • enterPiP

  • exitPiP

  • seekForward

  • seekBackward

  • volumeLow

  • volumeHigh

  • volumeMute

  • settings

  • checkmark

// Using custom play icon.
player.icons = { ...player.icons, play: '#play-svg-id' };

Extending Language

You can add your own language via the languages prop, see our english map as an example.

// Add the language.
player.languages = {
...player.languages,
zh: {
// From Google Translate.
play: '播放视频',
pause: '暂停影片',
// ...
}
};
// Change the locale.
player.locale = 'zh';

Theming

You can style the player via the theme prop. Under the hood it utilizes CSS custom properties.

CSS Vars

  • color

  • fontFamily

  • fontSizeSmall

  • fontSizeMedium

  • fontSizeLarge

  • fontSizeExtraLarge

  • fontWeightLight

  • fontWeightRegular

  • fontWeighBold

  • baseLineHeight

Example

// Apply a simple color theme.
player.theme = '#f76d82';
// Advanced theming.
player.theme = {
color: '#f76d82',
fontFamily: '"Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif',
fontSizeSmall: '14px',
fontSizeMedium: '16px',
fontSizeLarge: '18px',
fontSizeExtraLarge: '21px',
fontWeightLight: '300',
fontWeightRegular: '400',
fontWeightBold: '500',
baseLineHeight: '1.7'
}