@nomercy-entertainment/nomercy-video-player v0.3.6

NoMercy VideoPlayer

NoMercy VideoPlayer is a lightweight, plugin-based, customizable HTML5 video player built with JavaScript. It is designed to support a variety of media formats and streaming protocols while allowing developers to extend its functionality through modular plugins. Always feel like fighting video player UI choices? then this is the player for you.

Features

• HTML5 Video Support: Compatible with popular media formats (MP4, WebM, Ogg).
• Streaming Support: Handles streaming protocols like HLS via URLs.
• Plugin-Based Architecture: UI, subtitle renderer, and key event handler are customizable plugins, enabling easy customization and flexibility.
• Customizable Controls: Modify buttons, layout, and styles through plugins or custom code.
• Subtitles & Captions: Full support for VTT and ASS subtitle formats.
• Keyboard Shortcuts: Extendable key event handler for custom controls.

Example

import nmplayer from '@nomercy-entertainment/nomercy-video-player/src/index';
import OctopusPlugin from '@nomercy-entertainment/nomercy-video-player/src/plugins/octopusPlugin';
import KeyHandlerPlugin from '@nomercy-entertainment/nomercy-video-player/src/plugins/keyHandlerPlugin';
import type { PlayerConfig } from '@nomercy-entertainment/nomercy-video-player/src/types';

const config: PlayerConfig = {
	muted: false,
	controls: false,
	preload: 'auto',
	debug: false,
	playlist: [
		{
			title: 'Cosmos Laundromat',
			description: 'On a desolate island, a suicidal sheep named Franck meets his fate…',
			image: 'https://image.tmdb.org/t/p/w780/f2wABsgj2lIR2dkDEfBZX8p4Iyk.jpg',
			file: 'https://media.nomercy.tv/Films/Films/Cosmos.Laundromat.(2015)/Cosmos.Laundromat.(2015).NoMercy.m3u8',
			tracks: [
				{ label: 'Dutch (Full)', file: '...NoMercy.dut.full.vtt', language: 'dut', kind: 'subtitles' },
				{ label: 'English (Full)', file: '...NoMercy.eng.full.vtt', language: 'eng', kind: 'subtitles' },
				// Additional subtitle tracks...
			],
		},
		{
			title: 'Sintel',
			description: 'Sintel is an independently produced short film...',
			image: 'https://image.tmdb.org/t/p/w780/q2bVM5z90tCGbmXYtq2J38T5hSX.jpg',
			file: 'https://media.nomercy.tv/Films/Films/Sintel.(2010)/Sintel.(2010).NoMercy.m3u8',
			tracks: [
				{ label: 'Dutch (Full)', file: '...NoMercy.dut.full.vtt', language: 'dut', kind: 'subtitles' },
				{ label: 'English (Full)', file: '...NoMercy.eng.full.vtt', language: 'eng', kind: 'subtitles' },
				// Additional subtitle tracks...
			],
		},
		// Additional playlist items...
	],
	playbackRates: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2],
    // Additional configuration options...
};

const player = nmplayer('player') // 'player' is the ID of the div element, do not use a video tag
	.setup(config);

// Bind VLC keyboad shortcuts
const keyHandlerPlugin = new KeyHandlerPlugin();
player.registerPlugin('keyHandler', keyHandlerPlugin);
player.usePlugin('keyHandler');

// ASS subtitle support
const octopusPlugin = new OctopusPlugin();
player.registerPlugin('octopus', octopusPlugin);
player.usePlugin('octopus');

// const customUIPlugin = new CustomUIPlugin();
// player.registerPlugin('customUI', customUIPlugin);
// player.usePlugin('customUI');

Plugin Development

Developers can create their own plugins by following the NoMercy VideoPlayer API. Here's a basic structure of a plugin:

import Plugin from '@nomercy-entertainment/nomercy-video-player/src/plugin';
import { NMPlayer } from '@nomercy-entertainment/nomercy-video-player/src/types';

export interface PluginArgs {
	// Your extra config items
}

class CustomUIPlugin extends Plugin {
	player: NMPlayer<PluginArgs> = NMPlayer < PluginArgs > {};

	initialize(player: NMPlayer<PluginArgs>) {
		this.player = player;
		// Setup your plugin before use is called
	}
	
	dispose() {
		// clean up, called when the plugin is unmounted or the player is disposed
	}

	use() {
		// plugin logic
	}
}

export default CustomUIPlugin;

Type Definitions for NoMercyVideoPlayer

note: type definitions and api may not be 100% correct and are subject to change.

Interfaces

PlayerConfig

Configuration options for the player.

StretchOptions

Options for video stretching.

AutoLoadOptons

Options for media preload behavior.

PlaylistItem

Represents a media playlist item.

Track

Represents a media track.

TrackType

Type of media track.

Methods

Playback and State Control

Quality and Track Management

Player UI

Event Handling

Events

CurrentTrack

Represents the currently selected media track.

PreviewTime

Describes preview thumbnail dimensions and coordinates.

VolumeState

Represents the player's current volume state.

Chapter

Defines a chapter in the media.

TimeData

Provides playback time information.

Contributions

Contributions are welcome! If you encounter issues or have suggestions for improvement, feel free to open an issue or submit a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Contact

For further information or support, visit NoMercy.tv or contact our support team.

Made with ❤️ by NoMercy Entertainment