skills.rest
tkgstrator
tkgstratorCOMMUNITY
Explore all skills by this author →
Website𝕏@tkglingGitHub

hls-player

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
One-click install
npx skills add https://github.com/tkgstrator/KotoTV --skill hls-player
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
zenbuappszenbuapps

vidstack-hls-v1

Integrate Vidstack React components with hls.js for HLS streaming.

Official
Advanced
Roy-wonjiRoy-wonji

avkit

Create AVKit and AVFoundation media playback UI with PiP and AirPlay.

Community
Intermediate
fcannizzarofcannizzaro
3

streamdeck-react

Build React-based Stream Deck plugins with hooks and manifest generation.

Community
Advanced
daffy0208daffy0208
34

video-producer

Build custom HTML5 video players with HLS streaming and React UI controls.

Community
Intermediate