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
HLS.js provides comprehensive quality level management with automatic adaptive bitrate (ABR) selection and manual control options.
Access available quality levels and current selection.
interface Hls {
/** Available quality levels (read-only) */
readonly levels: Level[];
/** Current quality level index (-1 for auto) */
currentLevel: number;
/** Next quality level to be loaded */
nextLevel: number;
/** Quality level for loading segments */
loadLevel: number;
/** Next load level to be used */
nextLoadLevel: number;
/** First level index to use */
firstLevel: number;
/** Starting level for playback */
startLevel: number;
/** Whether auto level selection is enabled (read-only) */
readonly autoLevelEnabled: boolean;
/** Manual level setting (-1 if auto) (read-only) */
readonly manualLevel: number;
}Usage Examples:
const hls = new Hls();
// Wait for manifest to be parsed
hls.on(Hls.Events.MANIFEST_PARSED, () => {
console.log("Available levels:", hls.levels.length);
// Print all quality levels
hls.levels.forEach((level, index) => {
console.log(`Level ${index}: ${level.width}x${level.height} @ ${level.bitrate}bps`);
});
// Set manual quality level
hls.currentLevel = 2; // Select level 2
// Enable auto quality selection
hls.currentLevel = -1;
// Set starting level for future streams
hls.startLevel = 1;
});
// Listen for quality level changes
hls.on(Hls.Events.LEVEL_SWITCHING, (event, data) => {
console.log(`Switching to level ${data.level}`);
});
hls.on(Hls.Events.LEVEL_SWITCHED, (event, data) => {
console.log(`Switched to level ${data.level}`);
});Monitor and control bandwidth estimation for ABR decisions.
interface Hls {
/** Current bandwidth estimate in bps */
bandwidthEstimate: number;
/** Default EWMA bandwidth estimate (read-only) */
readonly abrEwmaDefaultEstimate: number;
/** Time to first byte estimate (read-only) */
readonly ttfbEstimate: number;
}Usage Examples:
const hls = new Hls();
// Monitor bandwidth changes
hls.on(Hls.Events.FRAG_LOADED, () => {
console.log("Current bandwidth estimate:", hls.bandwidthEstimate, "bps");
console.log("TTFB estimate:", hls.ttfbEstimate, "ms");
});
// Set initial bandwidth estimate
hls.bandwidthEstimate = 2000000; // 2 Mbps
// Access default estimate
console.log("Default estimate:", hls.abrEwmaDefaultEstimate);Access the adaptive bitrate controller for advanced operations.
class AbrController {
/**
* Reset the bandwidth estimator
* @param abrEwmaDefaultEstimate - Optional default estimate override
*/
resetEstimator(abrEwmaDefaultEstimate?: number): void;
}Usage Example:
const hls = new Hls();
// Access ABR controller (after initialization)
hls.on(Hls.Events.MEDIA_ATTACHED, () => {
// Reset bandwidth estimator
(hls as any).abrController?.resetEstimator(1000000); // Reset to 1 Mbps
});Control level capping based on player dimensions.
interface Hls {
/** Auto level capping based on player size */
autoLevelCapping: number;
/** Maximum HDCP level supported */
maxHdcpLevel: HdcpLevel;
}Usage Examples:
const hls = new Hls({
// Cap levels based on player size
capLevelToPlayerSize: true,
// Cap levels on FPS drops
capLevelOnFPSDrop: true
});
// Monitor level capping
console.log("Auto level capping:", hls.autoLevelCapping);
// Set HDCP level limit
hls.maxHdcpLevel = "TYPE-1";Quality level related events for monitoring ABR behavior.
// Level switching events
hls.on(Hls.Events.LEVEL_SWITCHING, (event, data: { level: number }) => {
// Called when starting to switch to a new level
});
hls.on(Hls.Events.LEVEL_SWITCHED, (event, data: { level: number }) => {
// Called when switch to new level is complete
});
hls.on(Hls.Events.LEVEL_LOADING, (event, data: { level: number, url: string }) => {
// Called when starting to load a level playlist
});
hls.on(Hls.Events.LEVEL_LOADED, (event, data: {
level: number,
details: LevelDetails,
stats: LoadStats
}) => {
// Called when level playlist is loaded
});
hls.on(Hls.Events.LEVEL_UPDATED, (event, data: {
level: number,
details: LevelDetails
}) => {
// Called when level playlist is updated (live streams)
});interface Level {
/** Bitrate in bits per second */
readonly bitrate: number;
/** Video width in pixels */
readonly width: number;
/** Video height in pixels */
readonly height: number;
/** Codec information string */
readonly codecSet: string;
/** Playlist URLs */
readonly url: string[];
/** Level details (after loading) */
readonly details: LevelDetails | undefined;
/** Frame rate */
readonly frameRate: number | undefined;
/** Video range (SDR, HDR10, etc.) */
readonly videoRange: VideoRange | undefined;
/** HDCP level requirement */
readonly hdcpLevel: HdcpLevel | undefined;
}
interface LevelDetails {
/** Total duration in seconds */
readonly totalduration: number;
/** Target duration for segments */
readonly targetduration: number;
/** Fragments in this level */
readonly fragments: Fragment[];
/** Live stream info */
readonly live: boolean;
/** Sequence number */
readonly startSN: number;
readonly endSN: number;
}
type HdcpLevel = "TYPE-0" | "TYPE-1" | null;
type VideoRange = "SDR" | "HDR10" | "HLG" | "HDR10+" | "DV";