Custom HTML5 Video/Audio And Youtube/Vimeo Players – vLite.js

Preview:

Description:

vLite.js is an advanced media player JavaScript library designed for creating custom HTML5 videos/audio and Youtube/Vimeo/Dailymotion players with your own styles.

The goal of this library is to make the web videos have a consistent look.

How to use it (v4+):

1. Install and import the vLite.js library and OPTIONAL providers & plugins as follows:

# Yarn
$ yarn add vlitejs
# NPM
$ npm i vlitejs

// Core
import './dist/vlite.css';
import Vlitejs from './dist/vlite.js';
// Youtube Provider
import VlitejsYoutube from './dist/providers/youtube.js';
// Vimeo Provider
import VlitejsVimeo from './dist/providers/vimeo.js';
// Dailymotion Provider
import VlitejsVimeo from './dist/providers/dailymotion.js';
// Picture in Picture plugin
import VlitejsPip from './dist/plugins/pip.js';
// Cast plugin
import './dist/plugins/cast.css';
import VlitejsPip from './dist/plugins/cast.js';
// Subtitle plugin
import './dist/plugins/subtitle.css';
import VlitejsSubtitle from './dist/plugins/subtitle.js';
// Airplay Plugin
import 'vlitejs/dist/plugins/airplay.css';
import VlitejsAirPlay from 'vlitejs/dist/plugins/airplay';
// Volume bar Plugin
import VlitejsVolumeBar from 'vlitejs/dist/plugins/volume-bar';
// Google IMA SDK Plugin
import 'vlitejs/dist/plugins/ima.css';
import VlitejsIma from 'vlitejs/dist/plugins/ima';
// Sticky Plugin
import VlitejsSticky from 'vlitejs/dist/plugins/sticky';
// Hotkey plugin
import VlitejsHotkeys from 'vlitejs/plugins/hotkeys.js';

2. Or directly load the necessary JavaScript and CSS files in the document.

<link href="dist/vlite.css" rel="stylesheet" />
<script src="dist/vlite.js"></script>
<!-- Providers & Plugins Here -->

3. Initialize the vLite.js library and we’re ready to go.

new Vlitejs('#player');

4. Embed videos & audios into your page.

<!-- HTML5 Video -->
<video id="player" class="vlite-js" src="video.mp4"></video>
<!-- HTML5 Audio -->
<audio id="player" class="vlite-js" src="audio.mp3"></audio>
<!-- Youtube Video -->
<div id="player" class="vlite-js" data-youtube-id="VideoID"></div>
<!-- Vimeo Video -->
<div id="player" class="vlite-js" data-vimeo-id="AudioID"></div>

5. Determine the provider you want to use: html5 (default), Youtube, Vimeo, or custom provider.

Vlitejs.registerProvider('youtube', VlitejsYoutube);
Vlitejs.registerProvider('vimeo', VlitejsVimeo);
new Vlitejs('#player',{
    provider: 'youtube'
});

6. Determine the player plugins you want to use:

Vlitejs.registerPlugin('subtitle', VlitejsSubtitle)
Vlitejs.registerPlugin('pip', VlitejsPip)
new Vlitejs('#player',{
    plugins: ['subtitle', 'pip']
});

7. Available configuration options.

new Vlitejs('#player',{
    options: {
      // auto play
      autoplay: false,
      // enable controls
      controls: true,
      // enables play/pause buttons
      playPause: true,
      // shows progress bar
      progressBar: true,
      // shows time
      time: true,
      // set seek time
      seekTime: 5,
      // shows volume control
      volume: true,
      // volume step
      volumeStep: 0.1,
      // shows fullscreen button
      fullscreen: true,
      // path to poster image
      poster: null,
      // shows play button
      bigPlay: true,
      // hide the control bar if the user is inactive
      autoHide: false,
      // in millisecond
      autoHideDelay: 3000,
      // add the playsinline attribute to the video
      playsinline: false,
      // loop the current media
      loop: false,
      // mute the current media
      muted: false,
      // Youtube/Vimeo player parameters
      providerParams: {},
    }
    
});

8. Trigger a function when the player is ready.

new Vlitejs('#player',{
    onReady: function (player) {
      player.pause()
    }
});

9. API methods.

// plays the video
player.play();
// pauses the video
player.pause();
// set the volume (0-1)
player.setVolume(volume);
// get the volume
player.getVolume();
// changes the current time in seconds
player.seekTo(20);
// gets the current time
player.getCurrentTime();
// gets the duration
player.getDuration();
// mute
player.mute();
// unmute
player.unMmute();
// fullscreen mode
player.requestFullscreen();
// exit the fullsceen mode
player.exitFullscreen();
// get the player instance
player.getInstance();
// set the loading status
player.loading(true/false);
// destroys the player
player.destroy();

10. Events.

player.on('play', () => console.log('play'))
player.on('pause', () => console.log('pause'))
player.on('progress', () => console.log('progress'))
player.on('timeupdate', () => console.log('timeupdate'))
player.on('volumechange', () => console.log('volumechange'))
player.on('enterfullscreen', () => console.log('enterfullscreen'))
player.on('exitfullscreen', () => console.log('exitfullscreen'))
player.on('enterpip', () => console.log('enterpip'))
player.on('leavepip', () => console.log('leavepip'))
player.on('trackenabled', () => console.log('trackenabled'))
player.on('trackdisabled', () => console.log('trackdisabled'))
player.on('ended', () => console.log('ended'))

Changelog:

v7.3.1 (03/05/2025)

• Prevent vertical scroll page on the volume hotkeys

v7.3.0 (03/05/2025)

• Improve plugin options
• Move keyboard shortcuts in a new plugin hotkeys

v7.2.1 (03/03/2025)

• Update loader overlay to make the control bar accessible during loading

v7.2.0 (02/24/2025)

• Use precision to volume value
• Remove useless v-fullscreenButtonDisplay class and add v-fullscreen as a state class
• Use abstract annotation in Player.ts

v7.1.0 (02/20/2025)

• Add options to customize the shortcuts value of volume and seek

v7.0.0 (11/28/2024)

• Updates Node.js

v6.0.5 (10/23/2024)

• Fix poster display after the first playback, isPaused is reset on media end

v6.0.4 (08/27/2024)

• Fix duration when preload is disabled

v6.0.3 (04/02/2024)

• Fix Firefox progress bar height
• Add Youtube origin parameter

v6.0.2 (02/14/2024)

• Bugfixes

v6.0.0 (07/04/2023)

• Migrate to ESM with package exports and rollup

v5.0.2 (06/26/2023)

• Add funding key in package.json
• Bugfix

v5.0.1 (05/03/2023)

• Fix Vimeo iframe size
• Update sticky plugin providers

v5.0.0 (05/01/2023)

• Add the volume bar plugin
• Add the sticky plugin
• Update HTML
• Add css file for PIP plugin
• Increase or decrease the volume by 0.1 and fix the round
• Remove animation on volume button
• Fix Dailymotion volume

v4.2.0 (09/09/2022)

• Add the Google IMA SDK plugin
• Add the AirPlay plugin
• Enable playsinline by default
• Call Vlitejs onReady function before the plugins onReady functions
• Use native aspect-ratio for player responsive
• Disable fullscreen on iPhone (not supported yet)

v4.1.2 (08/16/2022)

• Fix multiple cast instance

v4.1.1 (08/11/2022)

• Add the Dailymotion provider
• Add the Cast plugin
• Fix Youtube seekTo method conflicting with unstarted and unmuted video

v4.1.0 (08/11/2022)

• Fix default values for Cast plugin options

v4.0.7 (08/03/2022)

• Fix progress bar height

v4.0.5 (04/05/2022)

• Fix HTML5 event ready when the video is already loaded
• Add the autoHideDelay optio

v4.0.4 (10/24/2021)

• Move keydown event to the player element instead of document
• Player has the focus after the big play button click and after the subtitle button (inside the list) click
• Add focus on first subtitle button when the subtitle menu is opened
• Remove keydown restriction on specific tags
• Limit keydown actions when the player or children’s player has the focus
• Refacto onKeyDown function by categories
• Replace querySelector by cached elements
• Refactor subtitle click event and use validateTarget for event delegation
• Bugfixes

v4.0.3 (10/23/2021)

• Bugfixes

v4.0.2 (06/22/2021)

• Fix mute option not transferred to the player
• Fix play not triggered without the poster

v4.0.1 (06/18/2021)

• Fixed the default parameters and fix the selector HTMLDivElement

v4.0.0 (04/17/2021)

• New design and new icons
• Add Vimeo provider
• Add Audio HTML5 provider
• Add subtitle plugin
• Add Picture-in-Picture plugin
• Add a provider API to allow extension of current providers
• Add a plugin API to allow extension of current plugins
• Add sample-provider.js and sample-plugin.js for guidelines
• Add multiple native Event fired on media actions (play, pause, etc.)
• Add A11Y compatibility (<button>, <input type=”range”>, aria-*, :focus-visible)
• Add the volume up/down shortcuts
• Update HTML attributes from options and vice versa (autoplay, playsinline, muted, loop)
• Rename window.vlitejs to window.Vlitejs to make sure the constructor name starts with a capital
• Remove nativeControlsForTouch option
• Remove data-options HTML attributes in favor of options from the JS constructor

12/21/2019

• v3.0.4

12/11/2019

• v3.0.3: Fixed strict node engine version break with different node version

11/23/2019

• v3.0.1: Refactor

02/04/2019

• v2.0.1