Skip to content

Prerequisites

  • Node.js 18 or later
  • A bundler (Vite, Webpack, Rollup, esbuild) for module builds

Install via package manager

Shell
npm install @nomercy-entertainment/nomercy-video-player@beta

The package publishes under the beta dist-tag while v2 is in prerelease. Without the tag, npm install resolves nothing (the latest tag is still unpublished). Once v2.0.0 stable ships, the tag is no longer needed.

The package-manager toggle, pinned to the top right, switches this command to yarn, pnpm, or bun. hls.js installs automatically with the player — it is a direct dependency of the player package, so npm install @nomercy-entertainment/nomercy-video-player pulls it in. The player keeps it out of its own bundle (marked external, for dedup) and loads it lazily the first time you point at an HLS (.m3u8) source. The CDN / IIFE bundle is the one exception: it expects a global Hls, so those users load hls.js via a separate <script> first.

CDN (no bundler)

You can also drop the player onto a page with no build step. Load hls.js first (the IIFE bundle reads it from the Hls global), then the player bundle, which exposes a nmplayer global.

HTML
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/hls.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@nomercy-entertainment/nomercy-video-player@beta/dist/nomercy-video-player.iife.js"></script>

Built-in plugins are not part of the IIFE bundle, so use the npm install above when you need them.

TypeScript

Type definitions are bundled. No @types/ package is needed.

TypeScript
import nmplayer from '@nomercy-entertainment/nomercy-video-player';
import type { VideoPlaylistItem, IVideoPlayer } from '@nomercy-entertainment/nomercy-video-player';

Importing plugins

All plugins are available under the /plugins deep export:

TypeScript
import {
  DesktopUiPlugin,
  SubtitleOverlayPlugin,
  OctopusPlugin,
  SkipperPlugin,
} from '@nomercy-entertainment/nomercy-video-player/plugins';

Container element

The player mounts into an existing DOM element. The element must exist before calling nmplayer():

HTML
<div id="player" style="width: 100%; aspect-ratio: 16/9;"></div>
TypeScript
import nmplayer from '@nomercy-entertainment/nomercy-video-player';

const player = nmplayer('player').setup({
  baseUrl: 'https://raw.githubusercontent.com/NoMercy-Entertainment/nomercy-media/master/Films',
  playlist: [
    {
      title: 'Sintel',
      url: '/Sintel.(2010)/Sintel.(2010).NoMercy.m3u8',
    },
  ],
});

The string passed to nmplayer() is the id attribute of the container element.

See also