Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ncpa0/ncplayer
https://github.com/ncpa0/ncplayer
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/ncpa0/ncplayer
- Owner: ncpa0
- License: mit
- Created: 2024-04-25T17:16:41.000Z (9 months ago)
- Default Branch: master
- Last Pushed: 2024-12-06T15:35:51.000Z (about 1 month ago)
- Last Synced: 2024-12-06T15:49:53.538Z (about 1 month ago)
- Language: TypeScript
- Size: 255 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ncplayer
### Usage
```ts
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 `` 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`)
| 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` | Array of subtitle tracks to allow user to select. See [SubtitleTrack definition here](#subtitletrack). | `[]` |
| 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 `` property) | `false` |
| muted | `boolean` | Whether the video should be muted. (same as the native `` property) | `false` |
| poster | `string` | URL of the image to use as the poster. (same as the native `` property) | `undefined` |
| preload | `string` | Whether the video should be preloaded. Possible values are `none`, `metadata` and `auto`. (same as the native `` property) | `undefined` |
| loop | `boolean` | Whether the video should loop. (same as the native `` 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](#dismounter). | `undefined` |
#### SubtitleTrack
```ts
type SubtitleTrack = {
id: string;
src: string;
srclang: string;
label: string;
default?: boolean;
};
```
#### Dismounter
```ts
type Dismounter = {
ondismount(fn: Function): void;
};
```