OPENPLAYERJS
Modular · TypeScript-First · Zero Dependencies
The Lightweight Player for the
Modern Web v3
Why another media player? And why OpenPlayerJS?
The web moves fast. OpenPlayerJS v3 was rebuilt from the ground up as a modular monorepo — so you ship only the code your users actually need. A clean plugin architecture, full TypeScript types, and a tiny core that stays out of your way. One API. Every browser. Every device.
v3 Packages
Pick Only What You Need
Every capability ships as its own npm package. Your bundle stays lean regardless of how many features you enable.
@openplayer/core
Player engine, event bus, plugin registry & base media engine.
@openplayer/player
Full ESM and UMD bundles with UI accessible controls layer — progress bar, volume, captions & more.
@openplayer/hls
HLS live & VOD streaming powered by hls.js with quality levels.
@openplayer/ads
VAST & VMAP ad support — preroll, midroll, postroll & non-linear.
What's inside
Features
// ES module — tree-shakeable
import { Core } from '@openplayer/core';
import { createUI, buildControls } from '@openplayer/player';
import { HlsMediaEngine } from '@openplayer/hls';
import '@openplayerjs/player/openplayer.css';
const video = document.querySelector<HTMLVideoElement>('#player');
const core = new Core(video, {
plugins: [new HlsMediaEngine({})],
});
const controls = buildControls({
top: ['progress'],
'bottom-left': ['play', 'time', 'volume'],
'bottom-right': ['captions', 'settings', 'fullscreen'],
});
createUI(core, video, controls);
Modular & Tree-Shakeable
v3 is a true monorepo. Import the core engine, add the HLS plugin, sprinkle in ads — or just grab the all-in-one UMD bundle. Your call. Zero mandatory dependencies means your users only download what they use.
Every Browser. Every Device.
OpenPlayerJS v3 ships smart autoplay detection that handles each browser's quirks so you never have to. Full iOS Safari support, correct preload="none" behaviour, and a user-gesture-aware playback model that just works — across Chrome, Firefox, Edge, and Safari on desktop and mobile.
Full Ad Stack — VAST & VMAP
The @openplayer/ads package delivers a production-grade ad runtime. Preroll, midroll, postroll, non-linear overlays, waterfall sources, bumpers, and VMAP scheduling — all in one composable plugin. Provide your ad tag URL and let OpenPlayerJS handle the rest.
// TypeScript generics throughout
import type { PlayerUIConfig } from '@openplayer/core';
const config: PlayerUIConfig = {
controls: {
layers: {
left: ['play', 'time', 'volume'],
middle: ['progress'],
right: ['captions', 'settings', 'fullscreen'],
}
},
};
TypeScript-First, Fully Typed
Every public API ships with complete type definitions. Autocomplete your configuration, catch mistakes at compile time, and build confidently on a stable, typed contract. No @types package needed — types are bundled right alongside the source.
Try it Now!
Paste any MP4, HLS stream (.m3u8), or audio URL below. Add a VAST/VMAP ad tag to see the full ad stack in action.