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

xgplayer-react is the React component which encapsulating the xgplayer.

Start

1. Install

   $ npm install xgplayer-react@latest
   

2. Usage

   Step 1. Add xgplayer-react component

   import Xgplayer from 'xgplayer-react';

   Step 2. Use in template

   <Xgplayer config={config} format={format} playerInit={(player)=>{ Player = player; }} />

   Step 3. Config for xgplayer

   let config = {
     id: 'mse',
     url: '/xgplayer-demo.mp4'
   };
   let format = 'mp4';
   let Player = null;

   You can use 'config' object to pre-config xgplayer, such as size, volume, autoplay and so on. More config

   'format' is used to tell xgplayer which format video you want to play and which plugin you want to use. 'mp4', 'xg-mp4', 'hls', 'xg-hls', 'flv', 'xg-flv', 'dash' are supported. 'mp4' means play mp4 without using plugin; 'xg-mp4' means play mp4 with using xgplayer-mp4 plugin; 'hls' means play hls(.m3u8) with using xgplayer-hls.js plugin; 'xg-hls' means play hls(.m3u8) with using xgplayer-hls plugin; 'flv' means play flv with using xgplayer-flv.js plugin; 'xg-flv' means play flv with using xgplayer-flv plugin; 'dash' means play MPEG-DASH(.mpd) with using xgplayer-shaka plugin.

   'Player' is the xgplayer instance which exposed from the component. You can use 'Player' to access the API of xgplayer as follows.

API

Attributes

console.log(Player.currentTime)

More attributes

Method

Player.pause();

More methods

Event

Player.on('play', ()=>{console.log('play')})

More events

Life Cycle

Player.once('ready', ()=>{console.log('ready')})

More events

Plugins

xgplayer supports your custom plugins for more content viewing plugins

import Xgplayer from 'xgplayer-react';
import 'xgplayer-custom';

Demo

$ git clone [email protected]:bytedance/xgplayer-react.git
$ cd xgplayer-react
$ npm install
$ npm start

please visit http://localhost:9090/index.html

License

MIT