bytedance/xgplayer

A HTML5 video player with a parser that saves traffic

JavaScript

9,305

1,702 commits

updated Oct 15, 2026

See the code

README

Introduction

xgplayer is a web video player library. It has designed a separate, detachable UI component based on the principle that everything is componentized. More importantly, it is not only flexible in the UI layer, but also bold in its functionality: it gets rid of video loading, buffering, and format support for video dependence. Especially on mp4 it can be staged loading for that does not support streaming mp4. This means seamless switching with clarity, load control, and video savings. It also integrates on-demand and live support for FLV, HLS, and dash. Document

Start

  1. Install

    $ npm install xgplayer
    
  2. Usage

    Step 1:

    <div id="vs"></div>
    

    Step 2:

    import Player from 'xgplayer';
    
    const player = new Player({
        id: 'vs',
        url: 'https://s2.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4'
    })
    

    This is the easiest way to configure the player, then it runs with video. For more advanced content, see the plug-in section or documentation. more config

Plugins

xgplayer provides more plugins and supports custom plugins, for more content viewing plugins. There are many built-in plugins in the player, if you need to close specific plugins, you can disable them by ignores configuration

Dev

In order to debug by developers, we provide demos code in the fixtures directory of the repo. The player uses yarn for package management, and it only takes a few simple steps to start debugging in the repo

$ cd xgplayer
$ yarn
$ yarn dev:xgplayer

To debug other plugins, please refer to the scripts command provided in package.json in the root directory of the repo, such as:

$ yarn dev:hls
$ yarn dev:flv
$ yarn dev:mp4

Release

For the stable release flow, prerelease flow, and release commands, see Release Guideline.md.

License

Welcome to use xgplayer! Please read the following terms carefully. Using xgplayer means that you accept and agree to the terms.

  1. Xgplayer is licensed under the MIT License. You comply with its obligations by default.
  2. By default, you authorize us to place your logo in xgplayer website, which using xgplayer. If you have any problem, please let us know.
dash
flv
flv-parser
fmp4
hls
hls-player
html5-video
html5-video-player
mp4
mp4box
player
video
video-player
videoplayer

bytedance/xgplayer

A HTML5 video player with a parser that saves traffic

JavaScript

9,305

1,702 commits

updated Oct 15, 2026

See the code

README

Introduction

xgplayer is a web video player library. It has designed a separate, detachable UI component based on the principle that everything is componentized. More importantly, it is not only flexible in the UI layer, but also bold in its functionality: it gets rid of video loading, buffering, and format support for video dependence. Especially on mp4 it can be staged loading for that does not support streaming mp4. This means seamless switching with clarity, load control, and video savings. It also integrates on-demand and live support for FLV, HLS, and dash. Document

Start

  1. Install

    $ npm install xgplayer
    
  2. Usage

    Step 1:

    <div id="vs"></div>
    

    Step 2:

    import Player from 'xgplayer';
    
    const player = new Player({
        id: 'vs',
        url: 'https://s2.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4'
    })
    

    This is the easiest way to configure the player, then it runs with video. For more advanced content, see the plug-in section or documentation. more config

Plugins

xgplayer provides more plugins and supports custom plugins, for more content viewing plugins. There are many built-in plugins in the player, if you need to close specific plugins, you can disable them by ignores configuration

Dev

In order to debug by developers, we provide demos code in the fixtures directory of the repo. The player uses yarn for package management, and it only takes a few simple steps to start debugging in the repo

$ cd xgplayer
$ yarn
$ yarn dev:xgplayer

To debug other plugins, please refer to the scripts command provided in package.json in the root directory of the repo, such as:

$ yarn dev:hls
$ yarn dev:flv
$ yarn dev:mp4

Release

For the stable release flow, prerelease flow, and release commands, see Release Guideline.md.

License

Welcome to use xgplayer! Please read the following terms carefully. Using xgplayer means that you accept and agree to the terms.

  1. Xgplayer is licensed under the MIT License. You comply with its obligations by default.
  2. By default, you authorize us to place your logo in xgplayer website, which using xgplayer. If you have any problem, please let us know.
dash
flv
flv-parser
fmp4
hls
hls-player
html5-video
html5-video-player
mp4
mp4box
player
video
video-player
videoplayer

Project health

Overall

5.9/10

Maintained

10/10

Code review

9/10
OpenSSF Scorecard

Latest release

3.0.26 · Jul 15, 2026

Releases this year

3

Significant stargazers

Loyalsoldier

2,545 followers · starred Mar 2025

Chris A.

1,122 followers · starred Dec 2019

Feng Yu

113 followers · starred Jul 2018

Ouyang Yadong

372 followers · starred Apr 2019