High-performance React media engine with Organic Intelligence aesthetics. Supports HLS, DASH, and Hardware Acceleration.
npm install lorapok-player
Lorapok Player is a high-performance React media engine engineered for ultra-low latency playback and biological aesthetics. It seamlessly handles MP4, HLS, and DASH streams with 4K/8K hardware acceleration.
---
- Adaptive Multi-Platform: Native support for HLS (.m3u8), DASH (.mpd), and standard Mp4.
- Organic UI Engine: Biological aesthetics with real-time reactive ambient lighting.
- Hardware Acceleration: GPU-optimized rasterization for buttery smooth 8K playback.
- Neural Probing: Accurate duration and metadata discovery using supercomputing pipelines.
- Theme Injection: Runtime theme switching with zero-latency visual transition.
---
``bash`
npm install lorapok-player
`tsx
import { LorapokPlayer } from 'lorapok-player';
import 'lorapok-player/style.css';
const App = () => (
---
🧬 API REFERENCE
$3
| Prop | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| src |
| Required | Source URL (supports .mp4, .m3u8, .mpd). |
| autoPlay | boolean | false | Enable automatic playback. |
| loop | boolean | false | Restart media when finished. |
| muted | boolean | false | Start with volume at 0. |
| poster | string | undefined | Image displayed before video starts. |
| className | string | undefined | Custom CSS classes for the container. |
| initialPosition | number | 0 | Start playback from a specific timestamp (seconds). |
| showControls | boolean | true | Toggle the high-fidelity control deck. |$3
| Callback | Signature | Description |
| :--- | :--- | :--- |
| onPlay |
() => void | Fired when playback starts. |
| onPause | () => void | Fired when playback is paused. |
| onEnded | () => void | Fired when the media reaches the end. |
| onTimeUpdate | (time: number) => void | Fired periodically during playback. |
| onError | (error: any) => void | Fired when a loading or playback error occurs. |---
🎮 PROGRAMMATIC CONTROL (Imperative API)
The
LorapokPlayer component exposes a functional API via React refs. This allows you to control the player procedurally from your own components.$3
`tsx
import { useRef } from 'react';
import { LorapokPlayer, LorapokPlayerRef } from 'lorapok-player';const MyComponent = () => {
const playerRef = useRef(null);
const handleAction = () => {
// Programmatically load a new video
playerRef.current?.load('https://example.com/new-video.mp4');
// Control playback
playerRef.current?.play();
// Seek to 30 seconds
playerRef.current?.seek(30);
// Switch themes on the fly
playerRef.current?.setTheme('Cyber Bloom');
};
return
};
`$3
| Method | Signature | Description |
| :--- | :--- | :--- |
| load |
| Updates the source and prepares for playback. |
| play | () => void | Starts or resumes playback. |
| pause | () => void | Pauses playback. |
| toggle | () => void | Toggles play/pause state. |
| seek | (time: number) => void | Jumps to a specific timestamp (seconds). |
| setVolume | (v: number) => void | Sets volume level (0.0 to 1.0). |
| setMuted | (m: boolean) => void | Toggles or sets mute state. |
| setTheme | (name: 'Midnight Core' | 'Cyber Bloom' | 'Quantum Pulse') => void | Switches visual styling. |---
🎨 STYLING & ADAPTIVE THEME
The player uses biological aesthetics with a reactive ambient lighting system. You can override global styles using the provided CSS variables:
`css
:root {
--lorapok-neon-cyan: #00F3FF;
--lorapok-electric-purple: #BC13FE;
--lorapok-midnight: #050510;
}
`---
🛠 ADVANCED USAGE
$3
The engine automatically detects and initializes or dash.js based on the file extension. No additional configuration is required.$3
The library comes with a built-in interactive help system and standard shortcuts:
- SPACE : Play/Pause
- ← / → : Seek 5s
- F : Fullscreen
- M` : Mute---
---