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

Category: Javascript | April 2, 2024
Views Total:150 views
Official Page:Go to website
Last Update:April 2, 2024


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


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 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';

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,
      // shows volume control
      volume: true,
      // 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) {

9. API methods.

// plays the video;
// pauses the video
// set the volume (0-1)
// get the volume
// changes the current time in seconds
// gets the current time
// gets the duration
// mute
// unmute
// fullscreen mode
// exit the fullsceen mode
// get the player instance
// set the loading status
// destroys the player

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'))


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


  • v3.0.4


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


  • v3.0.1: Refactor


  • v2.0.1

You Might Be Interested In:

Leave a Reply