DEV Community: Aniket

Introducing FleetPlayer: A Headless, TypeScript-First HLS Video Player Engine

Aniket — Tue, 03 Mar 2026 09:44:03 +0000

Building a custom video player on the web can be a frustrating experience. You often find yourself wrestling with bulky, pre-packaged libraries that inject their own DOM elements, styles, and bloated UI components. If you just want complete control over your player's look and feel while relying on a solid streaming engine under the hood, your options are surprisingly limited.

That’s exactly why I built FleetPlayer.

FleetPlayer is a high-performance, framework-agnostic, and completely headless HLS video player engine built with TypeScript and Media Source Extensions (MSE).

Here is a look at what it does, why a "headless" approach matters, and how you can use it in your next project.

Why Headless?

In modern frontend development, the "headless" architecture has taken over UI components (think Headless UI or Radix). It separates the complex state management and business logic from the visual representation.

FleetPlayer brings this exact philosophy to video streaming. It handles the heavy lifting of fetching segments, parsing playlists, and pushing bytes to the video element, but it renders absolutely zero UI. You provide a standard tag, design your play buttons, progress bars, and volume sliders however you want in React, Vue, or Vanilla JS, and FleetPlayer simply powers it from behind the scenes.

Key Features
HLS Support: Plays HTTP Live Streaming (HLS) streams seamlessly using native Media Source Extensions (MSE).

100% Headless Core: Zero UI dependencies. Build your own controls or wrap them in your favourite framework's UI library.

Web Worker Powered: Bandwidth estimation and segment fetching are handled entirely off the main thread, keeping your UI buttery smooth.

Adaptive Bitrate (ABR): Real-time, automatic quality switching based on the user's network throughput.

Native Fallback: Automatically detects and switches to the browser's native HLS pipeline on iOS and Safari for maximum compatibility.

TypeScript-First: Shipped with full type definitions for a superior, error-free developer experience.

Framework Agnostic: Works perfectly with React, Vue, Angular, Svelte, or vanilla JavaScript.

Getting Started

You can drop FleetPlayer into any project with a quick NPM install:

npm install fleetplayer

Example 1: Vanilla JavaScript

Because it's framework-agnostic, initialising the player in standard JavaScript is incredibly straightforward:

<video id="my-video" controls></video> <script type="module"> import { FleetPlayer } from 'fleetplayer'; const videoElement = document.getElementById("my-video"); const player = new FleetPlayer(videoElement, { autoStart: true }); // Load an HLS stream player.load("https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8"); </script>

Example 2: React Integration

Using FleetPlayer in a React environment is just as easy as using standard refs and the useEffect hook.

import React, { useEffect, useRef } from 'react'; import { FleetPlayer } from 'fleetplayer'; const VideoPlayer = () => { const videoRef = useRef<HTMLVideoElement>(null); const playerRef = useRef<FleetPlayer | null>(null); useEffect(() => { if (videoRef.current) { playerRef.current = new FleetPlayer(videoRef.current); playerRef.current.load("YOUR_HLS_STREAM_URL.m3u8"); } return () => { // Clean up internal resources and web workers playerRef.current?.destroy(); }; }, []); return ( <video ref={videoRef} controls style={{ width: "100%" }} /> ); }; export default VideoPlayer;

Powerful API for Custom Experiences

Because you are building your own UI, you need access to the player's internal data. FleetPlayer provides a clean API to build advanced features:

player.setQuality(levelIndex): Build a custom quality-selector menu for your users. Press -1 to re-enable Auto (ABR) mode.

player.getStats(): Returns real-time performance data (buffered ranges, current bitrate, active quality level). Perfect for building an "Stats for Nerds" overlay!

Try It Out!

If you are building a custom VOD platform, a streaming application, or just want to break free from rigid video player libraries, give FleetPlayer a spin.

📦 NPM: https://www.npmjs.com/package/fleetplayer

I'm actively maintaining this and would love to hear your thoughts, feature requests, or see the custom UIs you build with it! Let me know in the comments below.

Building FleetVault — A Clean Multi-User Storage System with PHP & MySQL

Aniket — Sat, 28 Feb 2026 04:50:15 +0000

Visit GitHub

Modern users expect simple, fast, and secure cloud storage experiences. Platforms like Google Drive have set a high standard for clean design and seamless usability. Inspired by that simplicity, I built FleetVault — a multi-user storage system developed using PHP, MySQL, HTML, CSS, and JavaScript.

FleetVault is designed with one core idea: keep storage structured, secure, and easy to use without overcomplicating the stack.

The Vision Behind FleetVault

FleetVault is a lightweight cloud storage platform where users can create an account, log in securely, and manage their personal files inside a dedicated space. Each user has their own isolated storage directory on the server, ensuring privacy and clean organisation.

The goal was not to build a clone of a large-scale enterprise system, but rather to create a scalable foundation that could grow into a SaaS product in the future.

Clean Architecture, Simple Logic

At its core, FleetVault follows a clear separation of responsibilities:
The database handles user accounts and file metadata.
The server manages physical file storage in user-specific folders.
The frontend delivers a minimal, modern interface.
Sessions control authentication and access.

This structure keeps the system organised and easy to maintain while ensuring that each user’s data remains isolated and secure.

User Experience First

One of the biggest priorities in FleetVault was design clarity. The interface follows a clean, sharp aesthetic inspired by modern cloud platforms:

Minimal layout
Clear typography
Soft shadows and subtle hover effects
Sidebar navigation for folders
Top navigation bar with user profile access
Grid and list file views
Smooth interactions

The design avoids clutter. Every element serves a purpose. The result is a focused, distraction-free environment that feels professional and intuitive.

Fully Responsive Across Devices

FleetVault is built to work seamlessly on:

Desktop
Tablet
Mobile

The layout adapts intelligently based on screen size. Navigation collapses where needed, file grids adjust dynamically, and interactions remain smooth across devices. The experience feels consistent whether accessed on a large monitor or a smartphone.

Security as a Foundation

In any storage platform, security cannot be an afterthought.

FleetVault implements:

Secure password hashing
Session-based authentication
Protected dashboard access
User-based folder isolation
Controlled file operations

_Each user can only access their own files. Direct access to others
Directories are restricted, and proper validation ensures file integrity.
_

Designed for Scalability

Although FleetVault is built using a traditional PHP and MySQL stack, its structure allows for future expansion.

Potential upgrades include:

Storage limits per user
File sharing between users
Role-based access control
Admin analytics dashboard
Subscription-based monetisation
Migration to cloud object storage

Because the architecture is clean and modular, scaling the system doesn’t require rewriting the foundation.

Why Build Something Like FleetVault?

Building FleetVault demonstrates that you don’t always need complex frameworks or heavy infrastructure to create meaningful products. With thoughtful structure, secure logic, and modern design principles, even a classic tech stack can produce a polished and scalable application.

FleetVault is more than a storage system. It’s a proof of concept that clean architecture, strong fundamentals, and good design thinking can turn a simple idea into a solid product foundation.

If you're building your own SaaS or learning backend development, projects like this are where real understanding begins.

Visit GitHub