Vide

Modular video player library. Use only what you need.

Documentation · Getting Started · Demo · Try on StackBlitz

<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