Vide

Modular video player library. Use only what you need.

Documentation · Getting Started · Playground

<video src="video.mp4"></video>

import { createPlayer } from "@videts/vide";
import { hls } from "@videts/vide/hls";
import { vast } from "@videts/vide/vast";

const player = createPlayer(document.querySelector("video")!);
player.use(hls());
player.use(vast({ tagUrl: "https://example.com/vast.xml" }));

Explicit setup. No data attributes. No class scanning. No side effects. Web standards first — if the browser can do it, we don't reinvent it.

Features

• Tiny — Core 3.0 KB gzip. Tree-shakeable. Each plugin is a separate import.
• Web standards first — Proxies HTMLVideoElement. Fullscreen API, <track> subtitles, native HLS on Safari.
• Zero dependencies — No runtime dependencies. Peer deps only for optional integrations.
• TypeScript — Strict types throughout. Type-safe plugin data, events, and state machine.
• Streaming — HLS and DASH with adaptive bitrate. Thin wrappers around hls.js and dashjs.
• Advertising — VAST 4.2, VMAP scheduling, SSAI, VPAID 2.0, SIMID, Google IMA SDK bridge, OMID viewability.
• DRM — Widevine, FairPlay, PlayReady, ClearKey. Auto-detection, retry with backoff, key status events.
• UI — 17 headless components with optional theme. No UI / headless / themed — pick your level.
• Frameworks — React hooks, Vue 3 composables, Svelte 5 — all first-class.

Install

npm install @videts/vide

Package is published as @videts/vide on npm. The project name is Vide.

Quick Start

<div id="player-container">
  <video src="video.mp4"></video>
</div>

import { createPlayer } from "@videts/vide";
import { ui } from "@videts/vide/ui";
import "@videts/vide/ui/theme.css";

const player = createPlayer(document.querySelector("video")!);
player.use(ui({ container: document.getElementById("player-container")! }));

See the Getting Started guide for more.

Pick Your Stack

Stack	Start here
Vanilla JS / TS	Getting Started
React	React Guide
Vue 3	Vue Guide
Svelte 5	Svelte Guide
CDN / No build tool	CDN Guide
Migrating from video.js	Migration Guide

Plugins

Plugins are explicit opt-in. Import only what you need.

Plugin	What	gzip
@videts/vide	Core player	3.0 KB
@videts/vide/vast	VAST 4.2 ads	7.9 KB
@videts/vide/vmap	VMAP scheduling	8.8 KB
@videts/vide/hls	HLS streaming	1.4 KB
@videts/vide/dash	DASH streaming	1.4 KB
@videts/vide/drm	DRM (Widevine, FairPlay, PlayReady, ClearKey)	2.6 KB
@videts/vide/ssai	SSAI (server-side ads)	2.3 KB
@videts/vide/omid	Open Measurement	1.7 KB
@videts/vide/simid	Interactive ads	2.4 KB
@videts/vide/vpaid	VPAID 2.0 ads	2.1 KB
@videts/vide/ima	Google IMA SDK bridge	3.4 KB
@videts/vide/ui	Headless UI	5.7 KB
@videts/vide/ui/theme.css	Default theme	4.6 KB

HLS and DASH plugins require hls.js (~160 KB gzip) and dashjs (~220 KB gzip) as peer dependencies. Sizes above are vide wrapper code only.

See the plugin documentation for usage examples and configuration options.

License

MIT