Plugins
The design of xgplayer is based on plugin system, all of built-in components are developed as plugins, so it is really important for you to learn about the mechanism of plugin for better customizing the player.
Get plugin instance from player
// get pip instance
const pipInstance = player.getPlugin('pip')
// or
const pipInstance = player.plugins.pip
// Enter PIP mode by invoking API
pipInstance.switchPIP()
Plugin registeraion
Pass plugin to player by config:
import DemoPlugin from 'demoplugin'
import Player from 'xgplayer'
const player = new Player({
...,
plugins: [DemoPlugin]
})
Dynamic registration
import DemoPlugin from 'demoplugin'
import Player from 'xgplayer'
const player = new Player({
...
})
player.registerPlugin(DemoPlugin)
Ignore plugins
const player = {
...,
ignores: ['play']
}
Deregister plugin
In most of cases, you don't need to deregister plugins manually, but if it's really needed, you can do it by unRegisterPlugin API
player.unRegisterPlugin('pluginame')
Built-in plugins
| Name | Description |
|---|---|
| controls | Control bar |
| progress | Progress bar |
| progresspreview | Previewer |
| mobile | User gesture for mobile devices |
| pc | User gesture for PC browsers |
| definition | Change definition |
| error | Error feedback |
| fullscreen | Fullscreen button |
| cssfullscreen | CSS-fullscreen button |
| loading | Loading |
| play | Play/pause button |
| poster | Poster |
| enter | Loading for first frame |
| replay | Replay button |
| start | Big play/pause button (placed to center of playing area) |
| volume | Volume control bar |
| time | Current time / Duration |
| playbackrate | playback speed selection button |
| pip | picture-in-picture toggle button |