# bytedance/xgplayer

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/bytedance-xgplayer).**

9,245 stars · 939 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/bytedance/xgplayer
- Homepage: https://h5player.bytedance.com/
- awesome-repositories: https://awesome-repositories.com/repository/bytedance-xgplayer.md

## Topics

`dash` `flv` `flv-parser` `fmp4` `hls` `hls-player` `html5-video` `html5-video-player` `mp4` `mp4box` `player` `video` `video-player` `videoplayer`

## Description

xgplayer is a plugin-based HTML5 video player framework that supports multiple streaming formats including MP4, FLV, HLS, and dash. It is built on a component architecture that allows developers to extend functionality through self-contained plugins, with staged loading protocol adapters that reduce bandwidth usage. The player includes a strategy center for dynamic optimization that adjusts buffering, bitrate, and source selection in real time to reduce first-frame delay and playback stalling.

The player distinguishes itself through support for ultra-low latency live streaming with time-shift and recording playback capabilities, as well as commercial DRM playback using FairPlay, Widevine, and private encryption schemes with integrated license management. It provides cross-platform compatibility including WeChat browser support with inline playback, fullscreen mode, and screen orientation locking. The plugin system enables per-instance text localization, icon customization, and comprehensive plugin lifecycle management including registration, deregistration, and preset assembly.

The player offers a full set of playback controls including keyboard shortcuts, picture-in-picture mode, mini player window, playback speed adjustment, and video quality switching. It includes danmaku overlays, thumbnail previews from sprite sheets, progress markers, text track loading, screenshot capture, video rotation, and video download functionality. The player also provides audio playback capabilities with synchronized lyrics display, audio visualizer, and playlist management.

## Tags

### Graphics & Multimedia

- [Plugin-Based Architectures](https://awesome-repositories.com/f/graphics-multimedia/media-players/plugin-based-architectures.md) — Built on a plugin-based component architecture that extends functionality through self-contained components.
- [Video Players](https://awesome-repositories.com/f/graphics-multimedia/video-production/video-players.md) — Places a player container in the DOM and instantiates it with a video source for immediate playback. ([source](https://h5player.bytedance.com/en/guide/))
- [Video Source Configuration](https://awesome-repositories.com/f/graphics-multimedia/audio-music/audio-processing/content-source-managers/video-source-configuration.md) — Accepts a single URL or an array of source objects with type hints to play video content. ([source](https://h5player.bytedance.com/config/))
- [Low-Latency Live Stream Players](https://awesome-repositories.com/f/graphics-multimedia/audio-music/media-capture-and-playback/live-stream-controls/low-latency-live-stream-players.md) — Supports ultra-low latency live streaming with time-shift, recording playback, and dynamic bitrate adaptation.
- [Dynamic Bitrate Optimizers](https://awesome-repositories.com/f/graphics-multimedia/bitrate-control-strategies/dynamic-bitrate-optimizers.md) — Ships a strategy center that dynamically adjusts buffering, bitrate, and source selection to reduce stalling.
- [Live Streaming Players](https://awesome-repositories.com/f/graphics-multimedia/media-players/adaptive-streaming-players/live-streaming-players.md) — Supports ultra-low latency live streaming with time-shift, recording playback, and dynamic bitrate adaptation.
- [Low Latency Players](https://awesome-repositories.com/f/graphics-multimedia/media-players/adaptive-streaming-players/low-latency-players.md) — Supports ultra-low latency live streaming with time-shift, recording playback, and dynamic bitrate adaptation for sub-second delay.
- [Multi-Format Media Players](https://awesome-repositories.com/f/graphics-multimedia/multi-format-media-players.md) — Plays MP4, FLV, HLS, and dash formats with staged loading for optimized playback.
- [Cross-Platform Playback Configurations](https://awesome-repositories.com/f/graphics-multimedia/video-playback-components/cross-platform-playback-configurations.md) — Ships cross-platform compatibility including WeChat browser support with inline playback and orientation locking.
- [DRM Integration](https://awesome-repositories.com/f/graphics-multimedia/video-production/video-players/drm-integration.md) — Plays encrypted streams using FairPlay, Widevine, and custom DRM schemes with integrated license management.
- [Plugin Systems](https://awesome-repositories.com/f/graphics-multimedia/video-production/video-players/plugin-systems.md) — Provides a plugin architecture that lets developers extend player functionality with self-contained components. ([source](http://h5player.bytedance.com/en/plugins/))
- [Video Quality Adjustments](https://awesome-repositories.com/f/graphics-multimedia/adaptive-quality-adjustments/video-quality-adjustments.md) — Changes video resolution during playback to adapt to network conditions or user preference. ([source](https://cdn.jsdelivr.net/gh/bytedance/xgplayer@main/README.md))
- [Danmaku Rendering](https://awesome-repositories.com/f/graphics-multimedia/android-media-rendering-frameworks/danmaku-rendering.md) — Inserts user-defined scrolling text overlays on the video with configurable timing and display modes. ([source](https://h5player.bytedance.com/en/generate/))
- [Time-Shift Playback](https://awesome-repositories.com/f/graphics-multimedia/audio-music/media-capture-and-playback/live-capture-and-recording/time-shift-playback.md) — Pauses, rewinds, and resumes live streams by connecting to recording and time-shift management APIs. ([source](https://h5player.bytedance.com/en/commercial/))
- [Ultra-Low Latency Transport](https://awesome-repositories.com/f/graphics-multimedia/live-video-manipulation/ultra-low-latency-transport.md) — Delivers live streams with approximately one-second delay using RTM, FLV 2s low latency, and LL-HLS protocols. ([source](https://h5player.bytedance.com/en/commercial/))
- [Timed Text Tracks](https://awesome-repositories.com/f/graphics-multimedia/media-track-management/timed-text-tracks.md) — Loads external subtitle or caption files in WebVTT format and sets a default language track. ([source](https://h5player.bytedance.com/en/generate/))
- [Staged Loading Players](https://awesome-repositories.com/f/graphics-multimedia/multi-format-media-players/staged-loading-players.md) — Reduces bandwidth usage through staged loading protocol adapters for MP4, FLV, HLS, and dash formats.
- [Playback Speed Controllers](https://awesome-repositories.com/f/graphics-multimedia/playback-speed-controllers.md) — Includes a playback speed controller with predefined speed options for video rate adjustment. ([source](https://h5player.bytedance.com/en/examples/))
- [Seek Preview Thumbnails](https://awesome-repositories.com/f/graphics-multimedia/video-production/thumbnail-services/seek-preview-thumbnails.md) — Shows a thumbnail preview of the video at the hovered position on the progress bar. ([source](http://h5player.bytedance.com/en/plugins/))

### Web Development

- [HTML5 Media Players](https://awesome-repositories.com/f/web-development/html5-media-players.md) — A plugin-based HTML5 video player framework supporting MP4, FLV, HLS, and dash formats.
- [Plugin-Based Video Players](https://awesome-repositories.com/f/web-development/html5-media-players/plugin-based-video-players.md) — Provides a plugin-based HTML5 video player framework with staged loading for multiple streaming formats.
- [Traffic-Saving Video Players](https://awesome-repositories.com/f/web-development/html5-media-players/traffic-saving-video-players.md) — Reduces bandwidth usage through a traffic-saving parser and supports multiple streaming formats.
- [Cross-Platform Fullscreen Abstractions](https://awesome-repositories.com/f/web-development/fullscreen-management/cross-platform-fullscreen-abstractions.md) — Ships a cross-platform fullscreen abstraction that handles WeChat and other embedded browser contexts.

### Part of an Awesome List

- [Playback Configuration Settings](https://awesome-repositories.com/f/awesome-lists/media/video-playback/playback-configuration-settings.md) — Configures playback parameters like source URL, dimensions, poster, volume, autoplay, and fluid layout. ([source](https://h5player.bytedance.com/en/generate/))
- [Playback Performance Optimizations](https://awesome-repositories.com/f/awesome-lists/media/video-playback/playback-performance-optimizations.md) — Adjusts buffering, bitrate, and source selection in real time to reduce first-frame delay and stalling. ([source](https://h5player.bytedance.com/en/commercial/))
- [Video Thumbnail Sprite Sheets](https://awesome-repositories.com/f/awesome-lists/media/pixel-art-and-sprite-tools/sprite-sheet-generators/video-thumbnail-sprite-sheets.md) — Displays thumbnail previews from sprite sheets when hovering over the progress bar for video navigation.
- [Keyboard Shortcuts](https://awesome-repositories.com/f/awesome-lists/productivity/keyboard-shortcuts.md) — Responds to keyboard shortcuts for common actions like play, pause, seek, and volume adjustment. ([source](https://h5player.bytedance.com/en/examples/))

### Data & Databases

- [Staged Video Loading Adapters](https://awesome-repositories.com/f/data-databases/lazy-loading-data-adapters/staged-video-loading-adapters.md) — Provides staged loading protocol adapters that reduce bandwidth usage for MP4, FLV, HLS, and dash formats.
- [Time-Shift Live Stream Buffers](https://awesome-repositories.com/f/data-databases/real-time-data-streaming/live-stream-buffering/time-shift-live-stream-buffers.md) — Supports time-shift live streaming with pause, rewind, and resume via recording and time-shift management APIs.

### Development Tools & Productivity

- [Video Format Plugin Support](https://awesome-repositories.com/f/development-tools-productivity/project-configuration/toml-configuration-support/multi-format-support/video-format-plugin-support.md) — Plays video in MP4, FLV, HLS, and dash formats by selecting the appropriate streaming plugin. ([source](https://cdn.jsdelivr.net/gh/bytedance/xgplayer@main/README.md))
- [Dynamic Plugin Registrations](https://awesome-repositories.com/f/development-tools-productivity/dynamic-plugin-registrations.md) — Attaches a plugin to an already-running player instance through a dedicated registration method. ([source](http://h5player.bytedance.com/en/plugins/))

### DevOps & Infrastructure

- [Video Platform Integrations](https://awesome-repositories.com/f/devops-infrastructure/cloud-service-integrations/video-platform-integrations.md) — Provides integration with cloud video platforms for upload, transcoding, distribution, and playback workflows. ([source](https://h5player.bytedance.com/en/commercial/))
- [Feature Extension Plugins](https://awesome-repositories.com/f/devops-infrastructure/release-automation/plugin-extensibility/feature-extension-plugins.md) — Adds or removes built-in and custom plugins to tailor the player's features and behavior for specific use cases. ([source](https://cdn.jsdelivr.net/gh/bytedance/xgplayer@main/README.md))

### Security & Cryptography

- [DRM License Management](https://awesome-repositories.com/f/security-cryptography/identity-access-management/access-control/identity-role-management/identity-and-licensing-management/drm-license-management.md) — Integrates FairPlay, Widevine, and custom DRM license management for encrypted media playback.
- [DRM Encryption Schemes](https://awesome-repositories.com/f/security-cryptography/privacy-data-protection/data-encryption/end-to-end-encryption/media-encryption/drm-encryption-schemes.md) — Implements commercial DRM playback using FairPlay, Widevine, and private encryption schemes.

### User Interface & Experience

- [Custom Video Player UIs](https://awesome-repositories.com/f/user-interface-experience/mobile-interfaces/video-interfaces/custom-video-player-uis.md) — Allows developers to extend functionality through self-contained plugins for danmu overlays, thumbnail previews, and custom UI components.
- [Componentized](https://awesome-repositories.com/f/user-interface-experience/video-players/componentized.md) — Renders a web video player with componentized UI and staged loading for multiple streaming formats. ([source](https://cdn.jsdelivr.net/gh/bytedance/xgplayer@main/README.md))
- [Picture-in-Picture Interfaces](https://awesome-repositories.com/f/user-interface-experience/picture-in-picture-interfaces.md) — Ships a picture-in-picture toggle that keeps video visible in a floating window while browsing other content. ([source](https://h5player.bytedance.com/en/examples/))

### Mobile Development

- [WeChat-Compatible Players](https://awesome-repositories.com/f/mobile-development/mobile-video-players/wechat-compatible-players.md) — Provides cross-platform compatibility including WeChat browser support with inline playback, fullscreen mode, and screen orientation locking.

### Programming Languages & Runtimes

- [Initialization-Time](https://awesome-repositories.com/f/programming-languages-runtimes/programming-language-varieties/domain-specific-languages/automation-scripting/built-in/plugin-registrations/initialization-time.md) — Registers plugins at player initialization by passing plugin classes in the configuration array. ([source](https://cdn.jsdelivr.net/gh/bytedance/xgplayer@main/README.md))

### Software Engineering & Architecture

- [Plugin Configurations](https://awesome-repositories.com/f/software-engineering-architecture/default-configuration-values/plugin-configurations.md) — Registers third-party or custom plugins at startup and passes per-plugin settings through a dedicated configuration key. ([source](https://h5player.bytedance.com/en/examples/))
- [Comment Overlays](https://awesome-repositories.com/f/software-engineering-architecture/overlay-rendering-architectures/comment-overlays.md) — Displays user-submitted scrolling or positioned text comments over the video during playback. ([source](https://h5player.bytedance.com/en/generate/))
- [Plugin Presets](https://awesome-repositories.com/f/software-engineering-architecture/project-management-governance/project-management/project-lifecycle-management/project-configuration-presets/configuration-presets/plugin-presets.md) — Combines curated sets of plugins into presets to enable or disable feature groups for different playback scenarios. ([source](https://h5player.bytedance.com/en/guide/))