vLitejs

The onReady callback is executed when the player is fully initialized. The callback receives the player instance as its argument, which you can use to call methods or attach event listeners.

Providers like YouTube, Vimeo, and Dailymotion use their internal onready events, while HTML5 uses canplay|loadedmetadata to trigger this.

// Example: Muting the player immediately when ready
new Vlitejs('#player', {
  onReady: function (player) {
    player.mute();
  }
});

// Example: Attaching an event listener when ready
new Vlitejs('#player', {
  onReady: (player) => {
    player.on('play', () => {
      // The video starts playing
    });
  }
});

The mobile plugin adds specific interaction patterns for touch devices. On touch devices, it modifies how the overlay (.v-overlay) responds to taps:

1. First tap (when the control bar is hidden): Shows the control bar.
2. Subsequent taps (when the control bar is visible): Toggles play/pause.

Note: The plugin is a no-op on non-touch devices and relies on the internal player.isTouch flag, ensuring desktop behavior remains unchanged.

import 'vlitejs/vlite.css';
import Vlitejs from 'vlitejs';
import VlitejsMobile from 'vlitejs/plugins/mobile/mobile.js';

Vlitejs.registerPlugin('mobile', VlitejsMobile);

new Vlitejs('#player', {
  plugins: ['mobile']
});

Install vlitejs as a development dependency in your project. Note that vlitejs@6 is ESM-only and requires a minimum Node.js version of 22.

npm install vlitejs --save-dev

yarn add vlitejs --dev

The hotkeys plugin enables keyboard shortcuts for the vLitejs player. To use it, you must register the plugin using Vlitejs.registerPlugin and then include 'hotkeys' in the plugins array of your player configuration.

Default Keyboard Shortcuts:

import 'vlitejs/vlite.css';
import Vlitejs from 'vlitejs';
import VlitejsHotkeys from 'vlitejs/plugins/hotkeys.js';

// 1. Register the plugin
Vlitejs.registerPlugin('hotkeys', VlitejsHotkeys);

// 2. Initialize the player with the plugin enabled
new Vlitejs('#player', {
  plugins: ['hotkeys']
});

You can include vlitejs directly in your HTML using a script tag as an ES module. Ensure you include the CSS stylesheet from the CDN as well.

<link href="https://cdn.jsdelivr.net/npm/vlitejs@6/dist/vlite.css" rel="stylesheet" crossorigin />
<script type="module">
  import Vlitejs from 'https://cdn.jsdelivr.net/npm/vlitejs@6';
</script>

vLitejs targets different HTML elements depending on the media provider you are using. Use the following structures to prepare your markup:

• HTML5 Video: Use a <video> tag with a src attribute.
• HTML5 Audio: Use an <audio> tag with a src attribute.
• YouTube: Use a <div> with a data-youtube-id attribute.
• Vimeo: Use a <div> with a data-vimeo-id attribute.
• Dailymotion: Use a <div> with a data-dailymotion-id attribute.

<!-- HTML5 video -->
<video id="player" src="<path_to_video_mp4>"></video>

<!-- HTML5 audio -->
<audio id="player" src="<path_to_audio_mp3>"></audio>

<!-- Youtube -->
<div id="player" data-youtube-id="<video_id>"></div>

<!-- Vimeo -->
<div id="player" data-vimeo-id="<video_id>"></div>

<!-- Dailymotion -->
<div id="player" data-dailymotion-id="<video_id>"></div>

The Youtube provider enables vLitejs to control a YouTube player using the official YouTube IFrame Player API. The provider automatically handles loading the YouTube API for you.

To use it, you must register the provider with Vlitejs.registerProvider before initializing a new instance.

import 'vlitejs/vlite.css';
import Vlitejs from 'vlitejs';
import VlitejsYoutube from 'vlitejs/providers/youtube.js';

// Register the provider
Vlitejs.registerProvider('youtube', VlitejsYoutube);

// Initialize vLitejs on a container element
new Vlitejs('#player', {
  provider: 'youtube'
});

The Dailymotion provider enables support for the Dailymotion player using its JavaScript API. The provider automatically handles loading the Dailymotion API script.

To use it, you must provide a playerId (obtained from the Dailymotion Partner Space) during provider registration. You then target a container element in your HTML and specify provider: 'dailymotion' in the vLitejs configuration.

import 'vlitejs/vlite.css';
import Vlitejs from 'vlitejs';
import VlitejsDailymotion from 'vlitejs/providers/dailymotion.js';

// 1. Register the provider with your Dailymotion Player ID
Vlitejs.registerProvider('dailymotion', VlitejsDailymotion, {
  playerId: '<player_id>'
});

// 2. Initialize vLitejs on a container element
new Vlitejs('#player', {
  provider: 'dailymotion'
});

You can extend vLitejs by creating custom plugins. A plugin must be an ES6 JavaScript class.

Lifecycle Methods

vLitejs automatically manages the lifecycle of your plugin by calling these methods:

• init(): Called automatically to initialize the plugin.
• onReady(): Called automatically when the player is ready.

Compatibility Declaration

Each plugin must declare its compatibility using public instance fields providers and types.

• providers: An array of compatible providers (e.g., ['html5'], ['youtube', 'vimeo']).
• types: An array of supported media types (['video'] or ['audio']).

class Subtitle {
  providers = ['html5']; // 'html5|youtube|vimeo'
  types = ['video']; // video|audio'

  init() {
    // Initialize the plugin
  }

  onReady() {
    // Run code when the player is ready
  }
}

The sticky plugin enables sticky mode for the video player. To use it, you must import the plugin's JavaScript and CSS files, register the plugin with Vlitejs.registerPlugin, and then include 'sticky' in the plugins array of your Vlitejs instance configuration.

Required Imports:

• vlitejs/vlite.css
• vlitejs/plugins/sticky.css
• vlitejs/plugins/sticky.js

import 'vlitejs/vlite.css';
import 'vlitejs/plugins/sticky.css';
import Vlitejs from 'vlitejs';
import VlitejsSticky from 'vlitejs/plugins/sticky.js';

// Register the plugin
Vlitejs.registerPlugin('sticky', VlitejsSticky);

// Initialize Vlitejs with the plugin enabled
new Vlitejs('#player', {
  plugins: ['sticky']
});

The HTML5 provider is built into vLitejs by default. It allows you to wrap standard <video> or <audio> elements with the vLitejs player interface. You do not need to explicitly specify the provider in the configuration as html5 is the default value for the provider parameter.

import 'vlitejs/vlite.css';
import Vlitejs from 'vlitejs';

new Vlitejs('#player');

To use the HTML5 provider, ensure your media elements have a unique id that can be targeted by the Vlitejs constructor. The src attribute should point to your media file (e.g., .mp4 for video or .mp3 for audio).

<!-- Video Example -->
<video id="player" src="<path_to_video_mp4>"></video>

<!-- Audio Example -->
<audio id="player" src="<path_to_audio_mp3)"></audio>