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 { vast } from "@videts/vide/vast";
import { hls } from "@videts/vide/hls";

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

• Streaming — HLS and DASH with adaptive bitrate. Thin wrappers around hls.js and dashjs.
• Advertising — VAST 4.2 parsing, VMAP scheduling, SSAI, VPAID 2.0, SIMID interactive ads, Google IMA SDK bridge.
• Viewability — Open Measurement (OMID) with automatic AdVerification extraction from VAST.
• 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.
• Tiny — Core 3.0 KB gzip. Tree-shakeable. Each plugin is a separate import.
• TypeScript — Strict types throughout. Type-safe plugin data, events, and state machine.
• Zero dependencies — No runtime dependencies. Peer deps only for optional integrations.
• Web standards first — Proxies HTMLVideoElement. Fullscreen API, <track> subtitles, native HLS on Safari.

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")!);

// Optional — add UI controls
player.use(ui({ container: document.getElementById("player-container")! }));

// HTMLVideoElement-compatible — play, pause, src, currentTime, … all proxied
player.play();

// player.el — direct access to the underlying <video> element
// player.on() — typed custom events (statechange, ad:start, error, …)

See the Getting Started guide for more.

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 and dashjs as peer dependencies.

See the plugin documentation for usage examples and configuration options.

Documentation

• Getting Started — install, basic setup
• Plugin Guides — HLS, DASH, DRM, VAST, UI, and more
• API Reference — auto-generated from TypeScript
• Browser Support — compatibility notes
• Demo — live examples

License

MIT