# Plugins

Xigua Player argues that all designs are plugins, which can be as small as a play button, or as large as a LIVE function support. If you want to custom the player for finishing your business better, you should understand the plugins mechanism. The player has many inner plugins, such as error report, loading, replay and so on. You can develop yourself with closing the inner plugin for custom effects.

By default the plugin can launch itself. We suggest developping with inheritting from the player class if you need the custom plugin withnot self-start or the default processing mechanism of the web video player.

# Inner plugins

# play

Play/pause button of the controls. Recommend no change. Source

# time

Current layingtime display component. Can be customized. Source

# volume

Volume control component of the controls. Recommend no change.Source

# definition

Definition switching component of the controls. Recommend no change. Event-driven satisfies any kind of implementation. Source

# fullscreen

Fullscreen switching component of the controls. Recommend no change.Source

# poster

The player mapping. Recommend no change.Source

# progress

The player progress bar. Recommend no change.Source

# loading

The player loading hint. Recommend no change.Source

# error

The player error hint. Recommend no change.Source

# replay

The player operation interface of replay. Can be customized.Source

# playbackRate

Times the speed of playback. Recommend no change.Source

# danmu

The bullet subtitle of xgplayer. Recommend no change.Source

# textTrack

The player subtitles of xgplayer. Recommend no change.Source

# pip

The Picture-in-Picture of xgplayer. Recommend no change.Source

# cssFullscreen

The webpage style fullscreen switching component,icon can be customized.Source

# screenShot

Screenshot of the player inside, the screenshot format can be customized.Source

# playNext

The player jumps to play the next episode. Recommend no change.Source

# rotate

The player rotate component. Can be customized.Source

# download

The player download component. Can be customized.Source

# localPreview

The player preview local video. Recommend no change.Source

# i18n

The player can support multiple languages. Recommend no change.通过配置项增加其他语言。Source

# pc

The player PC interact defination. Include the loading animation.Source

# mobile

The player mobile interact defination. Include the loading animation.Source

# Custom plugin

1. Plugins development

// pluginName.js
import Player from 'xgplayer';

let pluginName=function(player){
  // plugin logic
}

Player.install('pluginName',pluginName);

2. Plugins using

import Player from 'xgplayer';

let player = new Player({
  id: 'xg',
  url: '//abc.com/**/*.mp4'
})

# Functional Plugins List

The player provides some plugins with common functions, such as HLS LIVE, FLV LIVE(VOD), MP4 stream VOD and MPEG-DASH VOD.

# xgplayer-mp4

The parser for the common MP4 videos, which can achieve the control of the buffering and preload， the accurate seek loading, seamless switch and saving bandwidth(See Definition switching config). The use of the plugin is shown below.

import 'xgplayer';
import Mp4Player from 'xgplayer-mp4';

let player = new Mp4Player({
  id: 'xg',
  url: '//abc.com/**/*.mp4',
  maxBufferLength: 10 // 设置最大缓冲区时长，默认5秒
})

Fiddle

This plugin can be executed automatically. When the browser does not support, the player will degrade automatically.

# xgplayer-hls

This plugin achieves the functions of VOD and LIVE in HLS protocol without depending on any third-party library. Its advantages include clear coding structure, lighter than hls.js and official maintain. The videos which do not comport with HLS protocol can not be played normally.

import 'xgplayer';
import HlsPlayer from 'xgplayer-hls';

let player = new HlsPlayer({
  id: 'xg',
  url: '//abc.com/**/*.m3u8'
})

Fiddle

# xgplayer-hls.js

This plugin achieves the functions of VOD and LIVE in HLS protocol with packaging hls.js.

import 'xgplayer';
import hlsjsPlayer from 'xgplayer-hls.js';

let player = new hlsjsPlayer({
  id: 'xg',
  url: '//abc.com/**/*.m3u8'
})

Fiddle

# xgplayer-flv

This plugin achieves the functions of VOD and LIVE in FLV protocol without depending on any third-party library. Its advantages include clear coding structure, lighter than hls.js and official maintain.

import 'xgplayer';
import FlvPlayer from 'xgplayer-flv';

let player = new FlvPlayer({
  id: 'xg',
  url: './xgplayer-demo.flv',
  poster: './poster.png',
  isLive: false,
  preloadTime: 30,
  minCachedTime: 5,
  cors: true
})

Fiddle

In addition to Configuration, there are some optional special configuration items for the xgplayer-flv plugin.

# xgplayer-flv.js

This plugin achieves the functions of VOD and LIVE in FLV protocol with packaging flv.js.

import 'xgplayer';
import FlvJsPlayer from 'xgplayer-flv.js';

let player = new FlvJsPlayer({
  id: 'xg',
  url: '//abc.com/**/*.flv'
})

Fiddle

In addition to Configuration, there are some optional special configuration items for the xgplayer-flv.js plugin. See flv.js API.

# xgplayer-logger

xgplayer provides data config interface for several site statistics methods(cnzz, baidu, gtag, raven). You can choose one and log the required data when the xgplayer event is triggered.

import Player from 'xgplayer';
import 'xgplayer-logger';

let player = new Player({
  id: 'xg',
  url: './xgplayer-demo.mp4',
  loggers: [{
   type: 'cnzz', // 'cnzz' | 'baidu' | 'gtag' | 'raven'
   options: { //The following is the default value, can be overridden by yours.
     category: 'video',
     actions: { // override the required events of xgplayer
         error: 'error',
         complete: 'complete',
         play: 'play',
         pause: 'pause',
         end: 'end',
         ready: 'ready',
         seek: 'seek',
         unload: 'unload'
     },
     label: player.config.url, // the value of label
     value: { // reported data
         error: (player) => player.currentTime,
         complete: (player) => player.currentTime,
         play: (player) => player.currentTime,
         pause: (player) => player.currentTime,
         end: (player) => player.currentTime,
         unload: (player) => player.currentTime,
         seek: (player) => player.currentTime,
         ready: (player) => player.currentTime
     }
   }
 }]
})