Demo

TIP

See the examples/ directory for runnable HTML demos covering all plugin combinations.

Quick Demo

A minimal player with HLS streaming and UI:

<div id="player">
  <video src="https://example.com/stream.m3u8" autoplay muted playsinline></video>
</div>

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

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

With VAST Pre-Roll

<div id="player">
  <video src="https://example.com/stream.m3u8" autoplay muted playsinline></video>
</div>

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

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

const uiPlugin = ui({ container: document.getElementById("player")! });
player.use(uiPlugin);
player.use(vast({
  tagUrl: "https://pubads.g.doubleclick.net/gampad/ads?...",
  adPlugins: uiPlugin.getAdPlugin(),
}));

Available Examples

Example	Plugins	File
Overview	—	index.html
Without UI	Core only	without-ui.html
UI controls	Core + UI	ui.html
Headless UI	Core + UI (individual)	ui-headless.html
Standalone UI	Core + UI (standalone)	ui-standalone.html
HLS streaming	Core + UI + HLS	hls.html
DASH streaming	Core + UI + DASH	dash.html
UI + VAST	Core + UI + VAST	ui-vast.html
HLS + VAST	Core + UI + HLS + VAST	hls-vast.html
DASH + VAST	Core + UI + DASH + VAST	dash-vast.html
VAST debug	Core + VAST	vast-debug.html
VAST wrapper	Core + VAST	wrapper.html
Ad Pod	Core + UI + VAST	ad-pod.html
Companion Ads	Core + UI + VAST	companion-ads.html
NonLinear Ads	Core + UI + VAST	nonlinear-ads.html
VMAP scheduling	Core + UI + VMAP	vmap.html
SSAI	Core + UI + HLS + SSAI	ssai.html
OMID viewability	Core + UI + VAST + OMID	omid.html
SIMID interactive	Core + UI + VAST + SIMID	simid.html
CDN all-in-one	All (script tag)	cdn-all.html
CDN individual	Core + plugins (script tag)	cdn-individual.html
CDN + ads	Core + VAST (script tag)	cdn-ads.html

To run examples locally:

git clone https://github.com/hogekai/vide.git
cd vide
pnpm install
pnpm build
# Open examples/*.html with a local server (e.g., VS Code Live Preview)

Plugin Sizes

Plugin	gzip
Core	2.8 KB
VAST	6.6 KB
VMAP	7.1 KB
HLS	1.4 KB
DASH	1.4 KB
DRM	1.7 KB
SSAI	2.0 KB
OMID	1.7 KB
SIMID	2.4 KB
VPAID	1.8 KB
IMA	3.5 KB
UI	5.3 KB
theme.css	3.5 KB