Skip to main content
Beta — @videojs/html is close to stable. Experimental adoption in real projects is welcome.
@videojs/html is a comprehensive library for building media players with vanilla JavaScript and Web Components. It provides a complete set of Custom Elements, state management, controllers, and utilities for creating feature-rich, accessible video and audio players — no framework required.

​
Installation

npm install @videojs/html

​
CDN

For quick embedding without a build step, load the video preset directly from a CDN: 
<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/html/cdn/video/player.js"></script>

​
Quick start

<script type="module">
  import '@videojs/html/video';
</script>

<video-player>
  <source src="https://example.com/video.m3u8" type="application/x-mpegURL">
  <video-skin></video-skin>
</video-player>

​
Exports

Entry pointDescription
.Core APIs — createPlayer, PlayerController, and related utilities
./videoVideo preset — registers video-player, video-skin, and hls-video elements
./audioAudio preset — registers audio player elements
./backgroundBackground preset — registers background player elements
./ui/*Individual UI custom element definitions
./feature/*Individual feature module definitions
./media/*Individual media custom element definitions

​
Presets

Presets are the fastest way to get a working player. Each preset imports and defines a curated set of custom elements in one line: 
// Register all video player elements at once
import '@videojs/html/video';

// Or register only what you need
import '@videojs/html/video/player';  // <video-player>
import '@videojs/html/video/skin';    // <video-skin>
import '@videojs/html/video/video';   // <hls-video>

​
Individual elements

For fine-grained tree-shaking, import individual element definitions: 
import '@videojs/html/ui/play-button';
import '@videojs/html/ui/mute-button';
import '@videojs/html/ui/time-slider';
import '@videojs/html/media/hls-video';

​
Custom elements

​
Player structure

ElementDescription
video-playerRoot player container, manages state and lifecycle
video-skinDefault skin layout, assembles controls into a complete UI
hls-video<video> element with HLS and DASH playback support

​
Controls

ElementDescription
media-play-buttonPlay/pause toggle
media-mute-buttonMute/unmute toggle
media-fullscreen-buttonFullscreen toggle
media-pip-buttonPicture-in-picture toggle
media-seek-buttonSeek forward/backward by a fixed interval
media-captions-buttonCaptions/subtitles toggle
media-playback-rate-buttonPlayback speed selector
media-time-sliderScrubber/seek bar
media-volume-sliderVolume control slider
media-time-displayCurrent time / duration display
media-thumbnailPreview thumbnail
media-buffering-indicatorLoading/buffering state indicator
media-posterVideo poster image
media-controlsLayout container for grouping controls
media-tooltipAccessible tooltip
media-popoverAccessible popover

​
Programmatic API

import { createPlayer } from '@videojs/html';

const { controller, mount } = createPlayer({
  features: [/* feature modules */],
});

// Mount into a container element
mount(document.querySelector('#player'));

// Control playback
controller.play();
controller.pause();
controller.seek(30);

​
Dependencies

PackageRole
@videojs/coreCore player logic and feature definitions
@videojs/elementCustom element base classes and mixins
@videojs/storeReactive state management
@videojs/spfStream Processing Framework
@videojs/utilsShared utility functions

@videojs/react

React components alternative using the same core.

@videojs/core

Runtime-agnostic core used by this package.

@videojs/store

Reactive state management used by custom elements.

@videojs/spf

Stream Processing Framework for HLS and DASH.

Build docs developers (and LLMs) love

Get started for freeTalk to us