Composable video player
A PlayerJS-like HTML5 / HLS player in pure TypeScript. Zero runtime dependencies, a declarative JSON layout, CSS-variable theming and a small plugin API. ~30 KB gzipped.
Install
npm
npm install composable-video-player
import { createPlayer } from 'composable-video-player';
createPlayer({
container: 'player',
source: '[360p]low.mp4,[720p]high.mp4',
subtitle: '[English]en.vtt',
});
CDN <script>
<div id="player"></div>
<script src="https://cdn.jsdelivr.net/npm/composable-video-player@0.1/dist/player.umd.js"></script>
<script>
VP.createPlayer({ container: 'player', source: 'video.mp4' });
</script>
Also on unpkg and, always the latest build, on this site: cdn/player.umd.js.
CDN ES module
<script type="module">
import { createPlayer } from
'https://cdn.jsdelivr.net/npm/composable-video-player@0.1/dist/player.js';
createPlayer({ container: 'player', source: 'stream.m3u8' });
</script>
PlayerJS embeds work too: new Playerjs({ id, file }). See compat.
Features
- Sources — qualities, audio tracks,
orfallbacks, playlists with folders, HLS via lazily loaded hls.js. - Plugins — quality, speed, audio tracks, VTT/SRT subtitles, sprite thumbnails, playlist, hotkeys, memory, autoplay, Media Session.
- Layout — the UI is a JSON tree of components with anchors, hide rules and action strings. Headless with
layout: false. - Theme — CSS custom properties or the
themeoption; light themes work out of the box. - Typed API — commands, events and state are fully typed; plugins extend options and commands via module augmentation.
- PlayerJS compat —
new Playerjs({...}),api(cmd, arg),PlayerjsEventsand postMessage.