ncplayer

Usage

import { NCPlayer, sig } from "ncplayer";

const source = sig("./video.mp4");
const previewSource = sig("./preview.mp4");
const poster = sig("./poster.jpg");

// each prop can be either a raw value or a signal
const player = NCPlayer({
  source: source,
  preview: previewSource,
  poster: poster,
  preload: "metadata",
  width: 640,
  height: 360,
});

document.body.appendChild(player);

function changeSource() {
  source.dispatch("./video2.mp4");
  previewSource.dispatch("./preview2.mp4");
  poster.dispatch("./poster2.jpg");
}

UI Elements size

The size of all UI elements of the NCPlayer can be controlled by setting the CSS font-size of the root element (.ncplayer). Font size however does not affect the width or height of the player itself. To control the dimensions of the player doing so via either the width and height props or CSS rules on the inner <video> tag is recommended (ex. .ncplayer video.main-player { width: 16em; }.)

Properties

All properties, except for dismounter, can be provided to the NCPlayer as either a value of the supported type, or a signal containing a value of that same type. (ex. width can be either a number or a Signal<number>)

Property Name	Type	Description	Default Value
source	string	URL(s) of the video to play. If provided multiple sources, the player will allow the user to select the source.	undefined
preview	string	URL of the video to use as the preview. Preview will be displayed above the progress bar as the user hovers over it.	undefined
subtitles	Array<SubtitleTrack>	Array of subtitle tracks to allow user to select. See SubtitleTrack definition here.	[]
width	number	Width of the player when not in the fullscreen mode.	undefined
height	number	Height of the player when not in the fullscreen mode.	undefined
previewWidth	number	Width of the preview video.	320
previewHeight	number	Height of the preview video.	undefined
previewUpdateThrottle	number	Determines how often the preview video timestamp should be updated as the user hovers over the progress bar.	250 (ms)
controlsTimeout	number	Time in milliseconds after which the controls should be hidden.	1000 (ms)
swipeControlRange	number	Maximum time range (in ms) it's possible to seek forward or backward by swiping on a mobile device.	60_000 (ms)
persistentVolume	boolean	Whether the player volume should persist between reloads.	false
autoplay	boolean	Whether the video should start playing as soon as it is ready. (same as the native <video> property)	false
muted	boolean	Whether the video should be muted. (same as the native <video> property)	false
poster	string	URL of the image to use as the poster. (same as the native <video> property)	undefined
preload	string	Whether the video should be preloaded. Possible values are none, metadata and auto. (same as the native <video> property)	undefined
loop	boolean	Whether the video should loop. (same as the native <video> property)	false
styles	false | string	When set to false, no styles will be added to the DOM, resulting in the unstyled player. (you will need to add styles yourself). When given a string, that string will be inserted into the DOM as a style tag instead of the default styles.	undefined
keySeekDuration	number	The duration in seconds that the player should seek when the user presses the left or right arrow keys.	5
globalKeyListener	boolean	By default player will listen to all key events that don't have an interactable target. If set to false only events with a target within the player will be listened to.	true
dismounter	Dismounter	An interface that should expose a ondismount method that registers a listener. NCPlayer will register teardown callbacks to this interface. See Dismounter definition here.	undefined

SubtitleTrack

type SubtitleTrack = {
  id: string;
  src: string;
  srclang: string;
  label: string;
  default?: boolean;
};

Dismounter

type Dismounter = {
  ondismount(fn: Function): void;
};