Skip to content

Latest commit

 

History

History
80 lines (65 loc) · 8.07 KB

README.md

File metadata and controls

80 lines (65 loc) · 8.07 KB
Raw

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;
};