August 17, 2022

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.

youtube html5 video player source code, plyr youtube example, custom html5 video player with css3 and jquery, free html5 video player with playlist, customize youtube player

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 API 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 information within the doc.

<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 able to go.

new Vlitejs('#player');

4. Embed movies & audios 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 choices.

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 when the participant is prepared.

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

Custom HTML5 Video/Audio And Youtube/Vimeo Players, vLitejs Plugin/Github, customize html5 video player, youtube video player online website


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.

Share

You may also like...

Leave a Reply

Your email address will not be published.