Version: 1.x

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],
  },
});

info

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.

// 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',
};