Nearly a decade ago, I started exploring ways to build lightweight and flexible video players. While working on client projects, I realized that existing libraries were often too heavy, difficult to customize, or included features that not everyone needed.
This experience inspired the creation of vLitejs (pronounced /viːlaɪt/), an open source project designed to offer a minimal, high-performance video and audio player that can be extended with plugins and providers.
History
The first version of vLitejs was released in 2019, supporting HTML5 video and YouTube. Audio support was added shortly after, along with accessibility and keyboard navigation. Additional providers like Dailymotion and Vimeo were later integrated.
The project has evolved with contributions from the community. Issues and discussions help refine the project. I guide the project's evolution, ensuring decisions follow a clear vision: requests are debated, sometimes implemented as plugins, or occasionally declined to maintain the project's focus, lightweight size, and performance.
Context and motivation
vLitejs was born from the desire to have a lightweight, fast, and flexible player.
At the time, libraries like Video.js and Plyr.js had grown heavy because they accepted perhaps too many requests from their communities, and maintenance became complex. I wanted a solution that stayed small by design while still being extensible when necessary.
The goal was simple: keep the default player minimal and make any extra capabilities optional through plugins.
Design principles and architecture
vLitejs is based on a clear and intentional separation: a minimal core, optional providers and plugins. The core implements only the essentials for HTML5 playback. Providers adapt the player to external platforms (YouTube, Dailymotion, Vimeo) and their SDKs are loaded on demand. Plugins add optional capabilities (PIP, subtitles, cast, hotkeys, etc.) in a scoped way that keeps the codebase modular and reusable.
Key technical choices:
- Written in TypeScript for strong typing and maintainability
- Delivered as EcmaScript Module (ESM) (inspired by Sindre Sorhus)
- Supports recent Node.js LTS releases and modern browsers
- Architecture based on a minimal core with opt-in plugins and providers
💡 Each provider inherits from a base
Playerclass, ensuring consistent behavior across playback types. Plugins interact with this class through the public API, extending the player without altering the core.
These architectural rules enable vLitejs to remain compact and easy to maintain.
Features
vLitejs provides a set of practical features designed for both developers and end users, all built around a modular architecture:
Core
- HTML5 video & audio by default
- Accessibility and keyboard navigation
- Customizable control elements
- Unified events API
Providers
- YouTube
- Dailymotion
- Vimeo
- SDKs automatically loaded
Plugins (highlights)
- Picture-in-Picture
- Subtitles
- Cast & AirPlay
- Hotkeys
- Sticky player
- Monetization (Google IMA SDK)
Advanced
- HLS support for streaming
- Inline SVG icons
How it works
This section shows how to include and use vLitejs in your pages.
Initializing the player
<video id="player" src="<path_to_video_mp4>"></video>
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. You can listen to common events such as play, pause, timeupdate, and many more depending on the context.
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 create custom plugins to extends capabilities. Plugins are scoped, interact with the player instance, and can be registered via the Plugin API.
For more details, see the Plugin API documentation and Provider API documentation on GitHub. They describe the available lifecycle hooks and best practices for building custom behaviors.
What's next
vLitejs will keep evolving while remaining lightweight and modular. Planned improvements:
- Automated E2E tests with Playwright to verify core and plugin integrations
- New providers and plugins driven by real user demand
- Better documentation and examples for plugin/provider development
- Performance monitoring and selective optimizations as needed
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 clear vision to keep the project focused and maintainable
Conclusion
vLitejs is a personal open source project that gives you a fast, flexible video and audio player. Its modular design lets you include only what you need: a simple, reliable player by default, with advanced features available on demand.
❤️ Special thanks to Maxime Lerouge for his help at the beginning of the project and Victor Schirm for designing the logo.
Top comments (0)