explaingit

bytedance/xgplayer

★ 9,175JavaScriptAudience · developerComplexity · 3/5LicenseSetup · moderate

TLDR

A browser video player from ByteDance that streams MP4 files in segments to reduce buffering, and supports HLS, DASH, and FLV formats through a fully plugin-based architecture.

Mindmap

mindmap
  root((xgplayer))
    What it does
      Browser video player
      Segmented MP4 loading
    Formats
      HLS
      DASH
      FLV
    Architecture
      Plugin based
      Replaceable UI
    Use Cases
      Web streaming
      Live video
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Embed a video player in a website that streams large MP4 files in segments to reduce initial load time and bandwidth usage.

USE CASE 2

Add HLS or DASH adaptive streaming to a web application with seamless quality-level switching.

USE CASE 3

Replace a default browser video element with a customizable player that handles FLV live streams.

USE CASE 4

Build a custom video player UI by swapping or extending xgplayer's modular plugin components.

Tech stack

JavaScriptnpmHLSDASHFLV

Getting it running

Difficulty · moderate Time to first run · 30min

Each format requires a separate plugin package (HLS, DASH, FLV have individual npm installs).

Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

In plain English

xgplayer is a web video player built by ByteDance, the company behind TikTok. It is designed to be embedded into websites and web applications to play video content in a browser. Developers add it to a webpage with a few lines of code, point it at a video file, and it handles the rest. The player is notable for how it handles MP4 video files. Standard browser video players download the entire file or rely on the server to support streaming. xgplayer can load an MP4 file in segments, which reduces how much data is transferred, allows switching between quality levels without interruption, and gives developers more control over buffering behavior. The README describes this as the key feature that sets it apart from typical web players. Beyond MP4, the player supports HLS and DASH, which are the two most common streaming formats used for live video and on-demand content at scale. There is also support for FLV, a format still used in some live streaming contexts. Each format is handled through a plugin, and the player's architecture is built around the idea that every feature, including UI controls, is a self-contained component that can be added, removed, or replaced. Installation uses npm, the standard package manager for JavaScript projects. The documentation site covers configuration options and the plugin system in more detail. The project is open source under the MIT license.

Copy-paste prompts

Prompt 1
Using xgplayer, show me how to embed a segmented MP4 video on a webpage with quality-level switching enabled.
Prompt 2
How do I add HLS live streaming support to xgplayer in a JavaScript project? Show me the setup and configuration code.
Prompt 3
I want to add a custom UI control button to xgplayer. How do I create and register a plugin?
Prompt 4
Show me how to configure xgplayer to play a DASH stream with adaptive bitrate switching.
Open on GitHub → Explain another repo

← bytedance on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.