JavaScript HLS client using MediaSourceExtension for smooth video stream playback
—
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Pending
The risk profile of this skill
The main Hls class provides the core streaming functionality for HLS playback, including media attachment, source loading, and playback lifecycle management.
Creates a new Hls instance with optional configuration.
/**
* Creates a new Hls instance with optional configuration
* @param userConfig - Optional configuration overrides
*/
constructor(userConfig?: Partial<HlsConfig>): Hls;Usage Example:
import Hls from "hls.js";
// Default configuration
const hls = new Hls();
// Custom configuration
const hlsCustom = new Hls({
maxBufferLength: 60,
maxBufferSize: 60 * 1000 * 1000,
startLevel: -1, // Auto-select start level
debug: false
});Attach and detach from HTML video elements.
/**
* Attach the player to an HTML media element
* @param media - HTML video element or media attachment data
*/
attachMedia(media: HTMLMediaElement | MediaAttachingData): void;
/**
* Detach from the current media element
*/
detachMedia(): void;
/**
* Transfer media attachment data for reattachment to another instance
* @returns Attachment data or null if no media attached
*/
transferMedia(): AttachMediaSourceData | null;Usage Examples:
const video = document.getElementById("video") as HTMLVideoElement;
const hls = new Hls();
// Basic attachment
hls.attachMedia(video);
// Listen for attachment completion
hls.on(Hls.Events.MEDIA_ATTACHED, () => {
console.log("Media element attached successfully");
});
// Detach when done
hls.detachMedia();Load HLS manifests and control data loading.
/**
* Set the HLS manifest URL to load
* @param url - URL of the HLS manifest (.m3u8)
*/
loadSource(url: string): void;
/**
* Start loading data at specified position
* @param startPosition - Start position in seconds (optional)
* @param skipSeekToStartPosition - Skip seeking to start position
*/
startLoad(startPosition?: number, skipSeekToStartPosition?: boolean): void;
/**
* Stop loading data and clear buffers
*/
stopLoad(): void;
/**
* Pause segment loading while keeping current buffers
*/
pauseBuffering(): void;
/**
* Resume segment loading after pause
*/
resumeBuffering(): void;Usage Examples:
const hls = new Hls();
hls.attachMedia(video);
// Load manifest
hls.loadSource("https://example.com/stream.m3u8");
// Start loading from beginning
hls.startLoad(0);
// Start loading at 30 seconds
hls.startLoad(30);
// Pause buffering (e.g., when tab is hidden)
hls.pauseBuffering();
// Resume buffering
hls.resumeBuffering();
// Stop loading completely
hls.stopLoad();Manage the player instance lifecycle.
/**
* Destroy the player instance and clean up resources
*/
destroy(): void;
/**
* Remove a quality level from the levels array
* @param levelIndex - Index of the level to remove
*/
removeLevel(levelIndex: number): void;
/**
* Attempt to recover from media errors
*/
recoverMediaError(): void;
/**
* Swap audio codec and try to recover from media error
*/
swapAudioCodec(): void;Usage Examples:
const hls = new Hls();
// Use the player...
// Try to recover from media error
hls.recoverMediaError();
// Try swapping audio codec for recovery
hls.swapAudioCodec();
// Remove a quality level
hls.removeLevel(2);
// Clean up when done
hls.destroy();Access player state and configuration.
interface Hls {
/** Runtime configuration (read-only) */
readonly config: HlsConfig;
/** User-provided configuration (read-only) */
readonly userConfig: Partial<HlsConfig>;
/** Logger functions (read-only) */
readonly logger: ILogger;
/** Currently attached media element (read-only) */
readonly media: HTMLMediaElement | null;
/** Current source URL (read-only) */
readonly url: string | null;
/** Unique session identifier (read-only) */
readonly sessionId: string;
/** Whether all buffers are filled to the end (read-only) */
readonly bufferedToEnd: boolean;
/** Whether startLoad was called before manifest parsed (read-only) */
readonly forceStartLoad: boolean;
/** Whether loading is enabled (read-only) */
readonly loadingEnabled: boolean;
/** Whether buffering is enabled (read-only) */
readonly bufferingEnabled: boolean;
/** Whether player has enough data to start playback (read-only) */
readonly hasEnoughToStart: boolean;
/** Start position set on startLoad or autostart (read-only) */
readonly startPosition: number;
/** Latest level details for the current level (read-only) */
readonly latestLevelDetails: LevelDetails | null;
/** Current load level object (read-only) */
readonly loadLevelObj: Level | null;
/** Main forward buffer info (read-only) */
readonly mainForwardBufferInfo: BufferInfo | null;
/** Maximum buffer length in seconds (read-only) */
readonly maxBufferLength: number;
/** Available content delivery network pathways (read-only) */
readonly pathways: string[];
/** Pathway priority order */
pathwayPriority: string[] | null;
}Usage Examples:
const hls = new Hls({ debug: true });
// Access configuration
console.log("Max buffer length:", hls.config.maxBufferLength);
console.log("Debug enabled:", hls.userConfig.debug);
// Check current state
console.log("Current source:", hls.url);
console.log("Session ID:", hls.sessionId);
console.log("Media attached:", hls.media !== null);
console.log("Buffered to end:", hls.bufferedToEnd);interface MediaAttachingData {
media: HTMLMediaElement;
}
interface AttachMediaSourceData {
media: HTMLMediaElement;
mediaSource: MediaSource;
}
interface ILogger {
trace: (...args: any[]) => void;
debug: (...args: any[]) => void;
log: (...args: any[]) => void;
warn: (...args: any[]) => void;
info: (...args: any[]) => void;
error: (...args: any[]) => void;
}
interface BufferInfo {
/** Buffer start time in seconds */
start: number;
/** Buffer end time in seconds */
end: number;
/** Buffer length in seconds */
len: number;
}
interface LevelDetails {
/** Whether this is a live stream */
live: boolean;
/** Playlist sequence number start */
startSN: number;
/** Playlist sequence number end */
endSN: number;
/** Total duration of the playlist */
totalduration: number;
/** Target duration for segments */
targetduration: number;
/** Media fragments in this level */
fragments: Fragment[];
/** Program date time */
programDateTime: number | null;
/** Whether playlist has ended */
endlist: boolean;
}
interface Fragment {
/** Fragment URL */
url: string;
/** Fragment duration in seconds */
duration: number;
/** Fragment sequence number */
sn: number;
/** Level index */
level: number;
/** Fragment start time */
start: number;
/** Fragment type */
type: string;
}