Vide

Modular video player library. Use only what you need.

Documentation · Getting Started · Demo

<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.

Install

npm install @videts/vide

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

Quick Start

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

import { createPlayer } from "@videts/vide";
// import type { PlayerEventMap } from "@videts/vide";

const player = createPlayer(document.querySelector("video")!);

// HTMLVideoElement-compatible — play, pause, src, currentTime, … all proxied
player.play();
// player.pause();
// player.src = "video.mp4";
// player.currentTime = 30;

// player.el — direct access to the underlying <video> element
// player.el.requestPictureInPicture();

// player.on() — typed custom events (statechange, ad:start, error, …)
player.on("statechange", ({ from, to }) => console.log(`${from} → ${to}`));
// player.on("volumechange", (e) => console.log(e.target));  // native events too

// addEventListener() delegates directly to the <video> element
// player.addEventListener("canplay", () => { ... });

Quick Start with UI

<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.

Plugins

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

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, CDN usage, 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