Skip to main content
Version: 1.x


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({
props: {
providers: [FileProvider, YouTubeProvider],

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({
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 = {
zh: {
// From Google Translate.
play: '播放视钑',
pause: 'ζš‚εœε½±η‰‡',
// ...
// Change the locale.
player.locale = 'zh';


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


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