Why I built vLitejs, a fast and flexible native video and audio player

Published: 2 days ago (December 7, 2025 at 03:44 PM EST)

3 min read

Source: Dev.to

History

The first version of vLitejs was released in 2019, supporting HTML5 video and YouTube. Audio support, accessibility, and keyboard navigation were added shortly after. Later, providers such as Dailymotion and Vimeo were integrated.

Community contributions shape the project. Issues and discussions help refine it, while decisions follow a clear vision to keep the library lightweight and performant.

Context and Motivation

vLitejs was created to provide a lightweight, fast, and flexible player. At the time, libraries like Video.js and Plyr.js had become heavy due to numerous feature requests and complex maintenance. The goal for vLitejs is to keep the default player minimal and make extra capabilities optional through plugins.

Design Principles and Architecture

vLitejs follows a clear separation:

Core – minimal essentials for HTML5 playback.
Providers – adapters for external platforms (YouTube, Dailymotion, Vimeo) that load their SDKs on demand.
Plugins – optional features (PIP, subtitles, cast, hotkeys, etc.) that extend the player without touching the core.

Key technical choices

Written in TypeScript for strong typing.
Distributed as an EcmaScript Module (ESM).
Supports recent Node.js LTS releases and modern browsers.

Each provider inherits from a base Player class, ensuring consistent behavior. Plugins interact with this class through a public API, keeping the codebase modular and reusable.

Features

Core

HTML5 video & audio by default
Accessibility and keyboard navigation
Customizable control elements
Unified events API

Providers

YouTube
Dailymotion
Vimeo (SDKs loaded automatically)

Plugins (highlights)

Picture-in-Picture
Subtitles
Cast & AirPlay
Hotkeys
Sticky player
Monetization (Google IMA SDK)

Advanced

HLS support for streaming
Inline SVG icons

vLitejs player

How It Works

Initializing the Player

import 'vlitejs/vlite.css';
import Vlitejs from 'vlitejs';

new Vlitejs('#player');

Providers Example (YouTube)

import 'vlitejs/vlite.css';
import Vlitejs from 'vlitejs';
import VlitejsYoutube from 'vlitejs/providers/youtube.js';

Vlitejs.registerProvider('youtube', VlitejsYoutube);

new Vlitejs('#player', {
  provider: 'youtube'
});

Plugins Example (PIP + Subtitle)

import 'vlitejs/vlite.css';
import 'vlitejs/plugins/pip.css';
import 'vlitejs/plugins/subtitle.css';

import Vlitejs from 'vlitejs';
import VlitejsPip from 'vlitejs/plugins/pip.js';
import VlitejsSubtitle from 'vlitejs/plugins/subtitle.js';

Vlitejs.registerPlugin('pip', VlitejsPip);
Vlitejs.registerPlugin('subtitle', VlitejsSubtitle);

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

Global Events

All events are standardized across providers and plugins.

new Vlitejs('#player', {
  onReady: (player) => {
    player.on('play', () => console.log('Video started'));
    player.on('pause', () => console.log('Video paused'));
    player.on('timeupdate', () => {
      console.log('Current time', player.getCurrentTime());
    });
  }
});

Creating a Custom Plugin

Developers can build custom plugins that interact with the player instance and register them via the Plugin API. See the Plugin API documentation and Provider API documentation for lifecycle hooks and best practices.

What’s Next

Automated E2E tests with Playwright for core and plugin integrations
New providers and plugins driven by user demand
Improved documentation and examples for plugin/provider development
Ongoing performance monitoring and selective optimizations

Key Takeaways

A clear architecture enables optimal performance while keeping the core minimal.
Modularity allows customization without overloading the library.
Strong TypeScript typing ensures maintainability and reliability.
Supports only modern browsers, avoiding unnecessary legacy code.
Community input is valuable, but decisions follow a focused vision to keep the project lightweight.

Conclusion

vLitejs is an open‑source, fast, and flexible video/audio player. Its modular design lets you include only what you need: a simple, reliable player by default, with advanced features available on demand.

Discover vLitejs

❤️ Special thanks to Maxime Lerouge for early help and Victor Schirm for the logo.