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.