Advanced Features

Explore the powerful advanced features of the M3U8 Online Player that provide enhanced control and functionality.

History Management

Automatic History Tracking

The player automatically saves your streaming history for easy access:

Automatic Saving: Every loaded stream is saved to history
Smart Organization: Streams are sorted by most recent usage
Title Extraction: Automatic title generation from URLs
Persistent Storage: History persists across browser sessions

History Operations

View History

Access the "History Records" section at the bottom
View up to 50 recent streams
See stream titles, URLs, and timestamps

Load from History

Click any history item to instantly load that stream
No need to re-enter URLs
Quick access to frequently used streams

Manage History

Delete Individual Items: Remove specific streams from history
Clear All History: Remove all saved streams at once
Automatic Cleanup: Oldest entries are removed when limit is reached

History Features

interface HistoryRecord {
  id: string; // Unique identifier
  url: string; // Stream URL
  title: string; // Extracted or custom title
  timestamp: number; // When it was last accessed
}

Stream Information Analysis

Detailed Stream Metadata

The player provides comprehensive stream analysis:

Playlist Information

Duration: Total stream length in seconds
Segments: Number of video segments in the playlist
Resolution: Video dimensions and quality
Bitrate: Streaming quality information

Real-time Statistics

Current Time: Elapsed playback time
Remaining Time: Time left in the stream
Buffer Status: Loading and buffering information
Network Status: Connection quality indicators

Stream Quality Detection

The player automatically detects and displays:

Video resolution (e.g., 1920x1080, 1280x720)
Audio codec information
Bitrate variations
Adaptive streaming quality levels

Advanced Playback Controls

Precise Volume Control

Slider Control: Fine-tune volume from 0-100%
Mute Toggle: Instant mute/unmute functionality
Visual Feedback: Real-time volume level display
Keyboard Control: Use arrow keys for precise adjustment

Playback State Management

State Tracking

Loading State: Shows loading indicators during stream preparation
Playing State: Active playback with real-time updates
Paused State: Maintains position and ready to resume
Error State: Clear error messages with recovery options

Smart Resume

Position Memory: Remembers where you left off
Auto-resume: Continues from last position when reloading
Cross-session: Maintains position across browser sessions

Error Handling and Recovery

Comprehensive Error Detection

Network Errors

Connection Timeout: Automatic retry with user notification
DNS Resolution: Clear error messages for domain issues
SSL/TLS Errors: Security-related error handling
CORS Issues: Cross-origin request error detection

Stream Errors

Invalid Playlist: Detection of malformed M3U8 files
Missing Segments: Handling of incomplete streams
Codec Issues: Unsupported format detection
Bitrate Problems: Quality-related error handling

Recovery Mechanisms

Automatic Retry

Smart Retry Logic: Intelligent retry with exponential backoff
User Notification: Clear feedback on retry attempts
Manual Retry: User-initiated retry options

Fallback Options

Alternative URLs: Support for multiple stream sources
Quality Degradation: Automatic quality adjustment
Error Recovery: Graceful handling of temporary issues

Performance Optimization

Efficient Resource Management

Memory Management

Stream Cleanup: Automatic cleanup of completed streams
Buffer Management: Intelligent buffering for smooth playback
Resource Monitoring: Real-time resource usage tracking

Network Optimization

Adaptive Buffering: Dynamic buffer size adjustment
Connection Pooling: Efficient network resource usage
Bandwidth Detection: Automatic quality adjustment based on connection

Browser Compatibility

Feature Detection

HLS Support: Automatic detection of native HLS support
Codec Support: Detection of supported video/audio codecs
API Availability: Graceful degradation for older browsers

Polyfill Integration

HLS.js Fallback: Automatic fallback for browsers without native HLS
Modern API Support: Progressive enhancement for newer browsers
Cross-browser Testing: Comprehensive browser compatibility

Customization Options

Player Configuration

Display Options

Video Size: Responsive sizing with aspect ratio preservation
Control Visibility: Show/hide various control elements
Theme Integration: Consistent styling with application theme

Behavior Settings

Autoplay: Configurable autoplay behavior
Loop: Option to loop streams automatically
Preload: Control over preloading behavior

User Preferences

Default Settings

Volume Level: Remember preferred volume settings
Quality Preference: Default quality selection
Control Layout: Customizable control arrangement

Accessibility

Keyboard Navigation: Full keyboard accessibility
Screen Reader Support: ARIA labels and descriptions
High Contrast: Support for high contrast modes

Integration Features

API Integration

Event System

// Example event handling
player.addEventListener('loadstart', () => {
  console.log('Stream loading started');
});

player.addEventListener('loadedmetadata', () => {
  console.log('Stream metadata loaded');
});

player.addEventListener('error', (error) => {
  console.log('Stream error:', error);
});