- Category
- Developer Tools
- Rank
- No. 246Tools index
- Pricing
- Open Source
- Type
- TOOL
- Builder
- bytedance
- GitHub
- 9.3k stars
- Latest release
- v3.0.27-rc.4
- Date
About
ByteDance's HTML5 video player with a built-in MP4/MSE parser that saves bandwidth via partial loading.
What it does
xgplayer is a browser video playback library built around detachable interface components and optional format plug-ins. Applications create a player inside a page, supply a media URL, and add or disable controls, subtitles, casting, advertising, music, or streaming support as needed.
Why it's ranked here
Its strongest case is breadth within one component model. The same player can handle ordinary web video while adding live or on-demand HLS, FLV, DASH, and MP4 support through dedicated packages. Built-in controls, language exports, custom plug-ins, and development demos make it a substantial application foundation.
What's good
The modular surface is concrete, not merely architectural language. Core controls, localization, subtitles, ads, casting, music, and streaming formats have separate exports or packages. HLS integration reports media information and statistics, handles fatal network and media errors, and supports source changes. Subtitle rendering includes mobile sizing, video fitting, language switching, and safe inline rendering.
Tradeoffs
The breadth creates integration choices: native format packages coexist with adapters for other playback engines. Streaming support is not one uniform implementation. DASH code manages buffering and quality changes differently from HLS adapters. The repository also carries legacy builds, polyfills, and an Internet Explorer 11 browser target, increasing maintenance surface. Some supplied source contains extensive commented-out code.
How to use it well
Use it for browser applications that need a configurable player shell plus selectable streaming, subtitle, advertising, casting, or music features. Start with the core package and add only the relevant plug-ins. Test each chosen format path and browser target independently. It does not spare teams from selecting and configuring the appropriate streaming engine.
Technical notes+
The root package.json defines a private Yarn workspace over packages/*, Jest test scripts, Biome formatting, legacy and polyfill build settings, and a browserslist that includes IE 11. packages/xgplayer/src/index.js exports Player, BasePlugin, Plugin, events, state, utilities, languages, controls, danmu, text tracks, and heat maps. Format entry points include packages/xgplayer-hls/src/index.js, packages/xgplayer-flv/src/index.js, packages/xgplayer-mp4-new/src/index.js, and packages/xgplayer-dash/src/index.js. Alternative engine adapters appear in packages/xgplayer-hls.js/src/index.js, packages/xgplayer-flv.js/src/index.js, and packages/xgplayer-shaka/src/index.js. packages/xgplayer-subtitles/src/index.js uses eventemitter3, resize observation, VOD and live modes, video-relative layout, and safe inline subtitle rendering.
Observed
- License
- MIT
- Primary language
- JavaScript, with TypeScript also present
- Packaging
- Private Yarn monorepo with packages/* workspaces
- Install surface
- Published npm library installed as xgplayer
- Interface
- Browser library with core exports and optional plug-in packages
- Media support
- MP4, HLS, FLV, and DASH, including on-demand and live playback
- Browser target
- Browserslist includes IE 11, last two versions, and browsers above one percent usage
- Testing
- Root scripts provide Jest runs, watch mode, coverage, and CI coverage
Read from README.md, package.json, packages/xgplayer/src/index.js, packages/xgplayer-ads/src/index.js, packages/xgplayer-flv/src/index.js, packages/xgplayer-hls/src/index.js, packages/xgplayer-mp4/src/index.js, packages/xgplayer-cast/src/index.ts, packages/xgplayer-dash/src/index.js, packages/xgplayer-music/src/index.js, packages/xgplayer-shaka/src/index.js, packages/xgplayer-flv.js/src/index.js, packages/xgplayer-hls.js/src/index.js, packages/xgplayer-mp4-new/src/index.js, packages/xgplayer-subtitles/src/index.js.
What it can do
Play HTML5 video content
HTML5 video files → Video playback in web browser
Parse MP4 video files
MP4 video files → Parsed video data for playback
Stream video using Media Source Extensions
Video stream data → Smooth video streaming playback
Load video content partially
Video file segments → Optimized video playback with reduced bandwidth usage
Reduce bandwidth consumption during video playback
Video content requests → Minimized data transfer for video streaming
Tags
Tech Stack
Comments (0)
No comments yet
Editorially curated, with community endorsements as a secondary signal. Corrections welcome.