hls-player

Name: hls-player
Availability: InStock
Author: tkgstrator

Integrate live and recorded video streaming into React UIs with hls.js.

1|Updated Apr 18, 2026

Search Tags:#frontend #react #video-streaming #live-stream #hls.js #recording-playback

Ready to run

npx skills add https://github.com/tkgstrator/KotoTV --skill hls-player

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: hls-player
Source: https://github.com/tkgstrator/KotoTV/tree/main/.claude/skills/hls-player
Command: npx skills add https://github.com/tkgstrator/KotoTV --skill hls-player

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides a practical pattern for embedding hls.js within a React UI, enabling consistent streaming for both live and recorded video.

Core Features & Use Cases

Wraps hls.js in a React component for video playback across live and recorded streams.
Exposes lifecycle-friendly hooks to manage stream sessions and channel changes.
Supports Safari native HLS and graceful fallback to hls.js when needed.

Quick Start

Instantiate the HlsPlayer with a live stream URL in your React UI.

Frequently Asked Questions about hls-player

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I integrate hls.js video streaming into a React component?▼

You can integrate hls.js video streaming in React by using a lifecycle-managed component pattern that wraps the library, handling stream instantiation and cleanup for live and recording playback across your UI.

Does hls.js live streaming work natively with Safari?▼

Yes, hls.js live streaming supports Safari by leveraging the browser's native HLS capabilities, while providing a graceful fallback to the hls.js library for other environments where native support is unavailable.

What is the best way to handle channel changes in a React live stream player?▼

The best way to handle channel changes in a React live stream player is by exposing lifecycle-friendly hooks that safely tear down the current hls.js stream session and initialize the new video source without memory leaks.

Can I use the same React video component for both live streams and recording playback?▼

Yes, you can use the same React video component for both live streams and recording playback by applying a unified hls.js pattern that manages the video source lifecycle across different streaming formats.

Why does my React hls.js player leak memory when switching live channels?▼

Memory leaks during live channel switches occur when the hls.js instance is not properly destroyed; using a lifecycle-managed React component pattern ensures the previous stream session is correctly torn down before loading a new source.