Customizing Video and Audio Player in Javascript | vLite.js

vLitejs is a fast and lightweight JavaScript library for customizing video and audio players. Written in native JavaScript without a dependency, it is built around a provider API and plug-in to extend these capabilities and keep the core with minimal functionality.

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

HTML5 video and audio players are included automatically. Other providers like Youtube or Vimeo can be loaded on-demand using the Provider API. Plugins use the same logic and can be downloaded on demand by the Plugin API. The library can create and download providers and other plugins.

Why vLitejs?

  • If you are concerned about your app’s loading performance, this library makes sense as it is very lightweight compared to the competition (only 6KB).
  • It’s very rare to be compatible with HTML5, Youtube, and Vimeo at the same time. By default, the library contains only HTML5 capabilities and exposes the provider API to extend capabilities with other providers.
  • If you need specific behaviors, the plugin API allows you to expand the capabilities of the library.
  • If you need to create a custom curated video or audio player for all web browsers.

Features:

  • Video and Audio – HTML5 Video, HTML5 Audio, Youtube, Vimeo.
  • Personalization – Choose the controls you want to display.
  • No dependency – written in native JavaScript without any framework.
  • Full Screen – Supports full-screen native API.
  • Provider API – Use the available providers or create your own.
  • Plugin API – Use the available plugins or create your own.
  • Events – Unified events for all web browsers, service providers, and plugins.
  • Autoload API – Youtube and Vimeo APIs are loaded automatically by their provider.
  • Subtitles – Supports multiple subtitles (VTT) paths.
  • Picture-in-Picture – Supports Picture-in-Picture API.
  • Playsinline – Supports built-in playback.
  • SVG icons – SVG is included in the library, with no sprites to include.
  • Shortcuts – Supports keyboard shortcuts.
  • Accessibility – The W3C and A11Y are valid.

How to make use of it:

1. Install and import the vLite.js library:

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

// Picture in Picture plugin
import VlitejsPip from './dist/plugins/pip.js';

// Subtitle plugin
import './dist/plugins/subtitle.css';
import VlitejsSubtitle from './dist/plugins/subtitle.js';

2. Or instantly load the mandatory JavaScript and CSS within the document.

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

3. Initialize the vLite.js library.

new Vlitejs('#player');

4. Embed movies & audio into your web 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 need to use: html5 (default), Youtube, Vimeo, or a custom supplier.

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

6. Determine the participant plugins you need 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,

      // 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.

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

9. API strategies.

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

See Demo And Download

Official Website(yoriiis): Click Here

This superior jQuery/javascript plugin is developed by yoriiis. For extra Advanced usage, please go to the official website.

Related Posts

vuejs-dialog-plugin

Vuejs Lightweight Prompt Based On Promise And Confirm Dialog

VUEJS DIALOG PLUGIN is a lightweight, promise-based, prompt, and dialog-based alert. Important updates The dialog will always be resolved by an object. (ie a callback to continue…

browser-alert-confirm-dialog-alert4html-js

Insert HTML Into Your Browser Alert & Confirm Dialog | alert4html.js

alert4html.js is a JavaScript library that enables you to insert HTML directly into your browser alerts while simulating Chrome alerts as well. alert4html.js is an alternative to…

Lightweight-Flexbox-Carousel-Plugin

Simple and Lightweight Flexbox Carousel Plugin With JavaScript | flexCarousel.js

Flexbox Responsive Slider – flexCarousel.js plugin is a simple and lightweight plug-in from Flexbox carousel ES6 JavaScript. An unofficial fork by Slick Carousel. Flex Carousel is a…

bootstrap-5-multi-level-dropdown

Multi-Level Dropdown Works With Bootstrap 5

Bootstrap 5 Multi-Level Dropdown, using the official HTML without adding additional CSS styles and classes, it’s just like the original support. Not all of the things listed…

jquery-confirmation-dialog

JQuery UI Built Dynamic Modal That Uses Bootstrap | confirm.js

confirm.js is to use confirm modal created using JQuery and Bootstrap. Put events in each custom button in your web application. Easy to implement, saves time. Requirements…

bootstrap-responsive-navbar

[Bootstrap 5] Responsive Navbar With off-canvas Display on Mobile

The Bootstrap 5-off-canvas navigation menu is a responsive navigation system that combines BS5 components outside of the canvas and navbar. Must Read: Pure CSS Mobile-friendly Responsive Table…