HubLensJavaScriptbytedance/xgplayer
// archived 2026-04-24
bytedance

xgplayer

Frontend#JavaScript#Video Player#HTML5#Web Development
View on GitHub
9,161

// summary

xgplayer is a web video player library that utilizes a fully componentized architecture for flexible UI customization. It removes dependencies on native video loading and buffering by providing advanced features like staged loading for non-streaming MP4 files. The library also offers comprehensive support for on-demand and live streaming formats including FLV, HLS, and DASH.

// technical analysis

xgplayer is a web video player library built on a highly modular, component-based architecture that separates the UI from core playback logic. By decoupling the player from standard browser video dependencies, it solves critical issues related to loading, buffering, and format support, particularly for non-streaming MP4 files. This design choice allows for advanced features like staged loading and seamless clarity switching, providing developers with a flexible and robust solution for both on-demand and live video streaming.

// key highlights

01
Implements a fully componentized architecture with detachable UI elements for maximum customization.
02
Provides staged loading for MP4 files, enabling streaming-like performance for formats that do not natively support it.
03
Supports a wide range of formats including FLV, HLS, and DASH for both on-demand and live video playback.
04
Offers a plugin-based system that allows developers to easily extend functionality or disable built-in features via configuration.
05
Enables seamless clarity switching and granular load control to optimize bandwidth and user experience.

// use cases

01
Staged loading for non-streaming MP4 files
02
Support for FLV, HLS, and DASH streaming
03
Highly modular and detachable UI component system

// getting started

To begin using xgplayer, install the package via npm using 'npm install xgplayer'. Once installed, create a container element in your HTML and initialize the player in your JavaScript by importing the Player class and providing the target element ID and video URL.