Package Exports
- malgnplayer
- malgnplayer/dist/malgnplayer.esm.js
- malgnplayer/dist/malgnplayer.min.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (malgnplayer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
🎬 MalgnPlayer
Modern HTML5 video player with JWPlayer-compatible API, comprehensive streaming support, and advanced DRM protection.
✨ Features
🎥 Core Features
- JWPlayer-compatible API - Easy migration from JWPlayer
- Multiple formats - MP4, WebM, HLS streaming support
- Plugin architecture - Extensible and modular design
- Responsive design - Mobile-optimized with touch events
- Custom UI - YouTube-style interactions and controls
🔒 DRM Protection
- Widevine DRM - Google's DRM system support
- PlayReady DRM - Microsoft's DRM system support
- EME Integration - Native browser DRM via Encrypted Media Extensions
- License management - Automatic acquisition and renewal
🎮 Advanced Controls
- Speed control - 0.25x to 2x playback speeds
- Subtitle support - Multiple languages with auto-detection
- Progress bar - Drag, click, and touch support with tooltips
- Volume control - Visual slider with mute functionality
- Fullscreen - Native fullscreen API support
🔄 Special Modes
- Autoloop mode - Seamless looping for GIF-like behavior
- Custom segments - Loop specific time ranges
- Mobile optimization - Touch-friendly controls and gestures
📦 Installation
NPM
npm install malgnplayer
CDN
<!-- IIFE (Global variable) -->
<script src="https://unpkg.com/malgnplayer/dist/malgnplayer.min.js"></script>
<!-- ES Module -->
<script type="module">
import MalgnPlayer from 'https://unpkg.com/malgnplayer/dist/malgnplayer.esm.js';
</script>
Download
Download the latest release from GitHub Releases
🚀 Quick Start
Basic Usage
<div id="player"></div>
<script>
// IIFE version
const player = new MalgnPlayer('player', {
file: 'https://example.com/video.mp4',
width: '100%',
height: '400px'
});
</script>
ES Modules
import MalgnPlayer from 'malgnplayer';
const player = new MalgnPlayer('player', {
file: 'https://example.com/video.mp4',
poster: 'https://example.com/poster.jpg',
autoplay: false,
controls: true
});
HLS Streaming
const player = new MalgnPlayer('player', {
file: 'https://example.com/stream.m3u8',
type: 'hls'
});
DRM Protected Content
const player = new MalgnPlayer('player', {
file: 'https://example.com/protected-content.m3u8',
drm: {
'com.widevine.alpha': {
licenseServerUrl: 'https://license-server.com/widevine',
videoRobustness: 'SW_SECURE_DECODE',
audioRobustness: 'SW_SECURE_CRYPTO'
}
}
});
Autoloop Mode
const player = new MalgnPlayer('player', {
file: 'https://example.com/video.mp4',
autoloop: true,
loopStartTime: 10,
loopEndTime: 30,
muted: true
});
📚 API Reference
Constructor
new MalgnPlayer(container, config)
Parameters:
container
(string|Element) - Container element ID or DOM elementconfig
(object) - Configuration options
Configuration Options
Option | Type | Default | Description |
---|---|---|---|
file |
string | - | Video file URL |
sources |
array | - | Multiple video sources |
type |
string | 'auto' | Video type (mp4, hls, etc.) |
poster |
string | - | Poster image URL |
width |
string | '100%' | Player width |
height |
string | '100%' | Player height |
autoplay |
boolean | false | Auto-start playback |
muted |
boolean | false | Start muted |
controls |
boolean | true | Show player controls |
autoloop |
boolean | false | Enable autoloop mode |
loopStartTime |
number | 0 | Loop start time (seconds) |
loopEndTime |
number | null | Loop end time (seconds) |
drm |
object | - | DRM configuration |
Methods
Playback Control
player.play() // Start playback
player.pause() // Pause playback
player.stop() // Stop and reset to beginning
player.seek(time) // Seek to time (seconds)
player.setVolume(level) // Set volume (0-100)
player.setMuted(muted) // Mute/unmute
Player Control
player.load(source) // Load new media
player.resize(width, height) // Resize player
player.setFullscreen(true) // Toggle fullscreen
player.destroy() // Destroy player instance
Information
player.getState() // Get current state
player.getPosition() // Get current time
player.getDuration() // Get total duration
player.getVolume() // Get volume level
player.getPlaybackRate() // Get playback speed
Quality Control
player.getQualityLevels() // Get available quality levels
player.getCurrentQuality() // Get current quality
player.setCurrentQuality(level) // Set quality level
Subtitles
player.getSubtitles() // Get available subtitles
player.setSubtitle(index) // Set active subtitle track
DRM
player.getDrmInfo() // Get DRM information
player.renewDrmLicense() // Renew DRM license
player.isDrmProtected() // Check if content is DRM protected
Autoloop
player.enableAutoloop() // Enable autoloop mode
player.disableAutoloop() // Disable autoloop mode
player.setLoopSegment(start, end) // Set custom loop segment
Event Handling
// Listen to events
player.on('ready', () => {
console.log('Player is ready');
});
player.on('play', () => {
console.log('Playback started');
});
player.on('pause', () => {
console.log('Playback paused');
});
player.on('complete', () => {
console.log('Video completed');
});
player.on('error', (error) => {
console.error('Player error:', error);
});
HLS Streaming
For HLS streams, the player automatically loads the hls.js library:
player.load({
file: 'https://example.com/stream.m3u8',
type: 'hls',
title: 'Live Stream'
});
Autoloop Mode
Perfect for homepage banners, product showcases, and promotional content. Works like an animated GIF with better quality and smaller file sizes.
Basic Autoloop Setup
// Create autoloop player (no controls, muted, loops every 30 seconds)
const player = new MalgnPlayer('banner-video', {
file: 'https://example.com/promo.mp4',
autoloop: true,
loopDuration: 30, // Loop every 30 seconds
controls: false, // Hide controls (automatically set in autoloop mode)
muted: true // Required for autoplay in most browsers
});
// Seamless autoloop (always seamless, no restart feeling)
const seamlessPlayer = new MalgnPlayer('seamless-banner', {
file: 'https://example.com/promo.mp4',
autoloop: true, // Always seamless
muted: true
});
Autoloop Configuration Options
const player = new MalgnPlayer('player', {
autoloop: true, // Enable autoloop mode (always seamless)
loopStartTime: 5, // Start loop from 5 seconds
loopEndTime: 20, // End loop at 20 seconds
controls: false, // Controls automatically hidden in autoloop mode
muted: true, // Required for autoplay
poster: 'poster.jpg' // Show poster until video loads
});
// More examples
const productShowcase = new MalgnPlayer('product-video', {
file: 'product-demo.mp4',
autoloop: true,
loopStartTime: 10.5, // Start from 10.5 seconds
loopEndTime: 25.3, // End at 25.3 seconds (core feature demo)
muted: true
});
const heroBanner = new MalgnPlayer('hero-banner', {
file: 'hero-video.mp4',
autoloop: true,
loopStartTime: 0, // From beginning
loopEndTime: 8, // First 8 seconds only
muted: true
});
Dynamic Autoloop Control
// Enable autoloop (always seamless)
await player.setAutoloop(true);
// Set specific segment loop (5-15 seconds)
player.setLoopSegment(5, 15);
await player.setAutoloop(true);
// Disable autoloop and restore normal playback
await player.setAutoloop(false);
// Check current autoloop settings
const autoloop = player.getAutoloop();
console.log(autoloop.enabled); // true/false
console.log(autoloop.startTime); // loop start time
console.log(autoloop.endTime); // loop end time
Use Cases
- Homepage Hero Sections: Eye-catching video backgrounds
- Product Showcases: Seamless product demonstration loops
- Promotional Banners: Marketing content that doesn't require user interaction
- Background Videos: Atmospheric content for landing pages
CSS Styling for Autoloop
.banner-video {
width: 100%;
height: 400px;
object-fit: cover;
border-radius: 8px;
}
/* Full-width banner */
.hero-video {
width: 100vw;
height: 60vh;
object-fit: cover;
}
Mobile Support
The player is optimized for mobile devices with:
- Touch-friendly controls
- Responsive design
- Touch gestures (tap to pause, double-tap to seek)
- Proper viewport handling
Browser Support
- Chrome 60+
- Firefox 60+
- Safari 12+
- Edge 79+
- Mobile browsers (iOS Safari, Chrome Mobile)
Development
Build from Source
git clone https://github.com/hopegiver/malgnplayer.git
cd malgnplayer
npm install
node build.js
Project Structure
src/
├── malgnplayer.js # Main player class
├── core/ # Core video engine
├── ui/ # UI components
├── utils/ # Utilities
└── plugins/ # Plugin system
License
MIT License - see LICENSE file for details.
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.