Skip to content

Do I need to install hls.js separately?

No. hls.js installs automatically with the player (a direct dependency of the player package) — nothing extra to install for the npm / bundler path. See Installation for the CDN exception.

For the CDN / IIFE bundle (no bundler), the IIFE externalises hls.js and expects a global Hls, so load it via a separate <script> before the player script:

HTML
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/hls.min.js"></script>

How do I type my plugin against the player?

Use the IVideoPlayer<T> interface rather than the concrete NMVideoPlayer class:

TypeScript
import { Plugin } from '@nomercy-entertainment/nomercy-player-core';
import type { IVideoPlayer } from '@nomercy-entertainment/nomercy-video-player';

class MyPlugin extends Plugin<IVideoPlayer> {
  override use(): void {
    this.on('ready', () => {
      // this.player is fully typed as IVideoPlayer
      this.player.play();
    });
  }
}

How do I set a default subtitle or audio language?

Pass defaultSubtitleLanguage and defaultAudioLanguage (BCP-47 tags) in VideoPlayerConfig:

TypeScript
player.setup({
  baseUrl: 'https://raw.githubusercontent.com/NoMercy-Entertainment/nomercy-media/master/Films',
  defaultSubtitleLanguage: 'en',
  defaultAudioLanguage: 'nl',
  playlist: [
    {
      url: '/Tears.of.Steel.(2012)/Tears.of.Steel.(2012).NoMercy.m3u8',
    },
  ],
});

How do I load relative poster URLs from a CDN?

Set baseImageUrl in VideoPlayerConfig:

TypeScript
player.setup({
  baseImageUrl: 'https://image.tmdb.org/t/p/original',
  playlist: [{ url: '...', image: '/abc123.jpg' }],
});

Absolute URLs pass through unchanged.

Why does my subtitle track not render?

The subtitles field on VideoPlaylistItem is the canonical typed field. Verify:

  1. Each entry has id, kind: 'subtitles', language, and a reachable url.
  2. For ASS/SSA files, add the OctopusPlugin. VTT sidecar and native TextTrack are handled by the SubtitleOverlayPlugin.
  3. Check that defaultSubtitleLanguage matches the language tag in your track.

How do I use thumbnail preview sprites?

Set previewSpriteUrl on the playlist item. The DesktopUiPlugin reads this automatically when the user hovers the progress bar:

TypeScript
// baseUrl: 'https://raw.githubusercontent.com/NoMercy-Entertainment/nomercy-media/master/Films'
{
  url: '/Tears.of.Steel.(2012)/Tears.of.Steel.(2012).NoMercy.m3u8',
  previewSpriteUrl: '/Tears.of.Steel.(2012)/previews.vtt',
}

How do I add skip markers for intro or credits?

Set skippers on the playlist item and register the SkipperPlugin:

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

player.addPlugin(SkipperPlugin, { autoSkip: ['recap'] });
player.setup({
  baseUrl: 'https://raw.githubusercontent.com/NoMercy-Entertainment/nomercy-media/master/Films',
  playlist: [
    {
      url: '/Big.Buck.Bunny.(2008)/Big.Buck.Bunny.(2008).NoMercy.m3u8',
      skippers: {
        intro: { start: 3, end: 92 },
        credits: { start: 600, end: 633 },
      },
    },
  ],
});

Listen to skipper:available to render your own skip button.

Can I use the player with Vue or React?

Yes. The player is headless — no built-in UI — and framework-agnostic. Mount it into a ref-attached element:

TypeScript
// Vue 3
onMounted(() => {
  player = nmplayer(containerRef.value.id).setup({ ... });
});
onUnmounted(() => player.dispose());

How do I swap the video backend for a custom implementation?

Pass backendFactory in config:

TypeScript
import type { VideoBackendFactory } from '@nomercy-entertainment/nomercy-video-player';

const myFactory: VideoBackendFactory = (kind, config) => {
  return new MyCustomBackend(config);
};

player.setup({ backendFactory: myFactory, playlist: [...] });

See Video Backend adapter.

Use the player core’s auth config in VideoPlayerConfig (inherited from BasePlayerConfig). The player core’s fetch pipeline injects bearer tokens into all subtitle, font, and poster fetches. See /nomercy-player-core/auth-fetch.

See also