西瓜播放器 HTML5 video video.js 播放器 HTML5播放器 mp4 hls hls.js flv flv.js dash dash.js 无缝切换

Preset

Concept

In order to support the plugin management, we propose the concept of Preset. Preset can be simply understood as "a collection of plugins and language packs". When there are multiple playing scenes in a project, Preset will become a good helper for you to manage plugins

image.png

The player has four default presets: defaultPreset、defaultPresetEn、mobilePreset、livePreset, If you use cdn or npm import Player from 'xgplayer', it will has defaultPreset

The Chinese language pack is not integrated in defaultPresetEn, but the other presets are integrated with it

Preset Usage

Notice

If you just want to disable a few plugins in the preset, you can configure it by referring to config.ignores. You won't need to implement a preset yourself any more

defaultPresetEn

defaultPresetEn is a subset of defaultPreset, the Chinese language pack is not imported

/**
 * The difference between SimplePlayer and Player is that Player integrates defaultPreset
 */
import { SimplePlayer } from 'xgplayer';
import defaultPresetEn from 'xgplayer/es/presets/default-en';
import 'xgplayer/dist/index.min.css'

SimplePlayer.defaultPreset = defaultPresetEn;

const = new SimplePlayer(options)

LivePreset

Compared with defaultPreset, LivePreset reduces some plugins that are not used, such as progress, progresspreview, time, download, screenShot and other plugins that are not used for live, which are a subset of defaultPreset

import { SimplePlayer } from 'xgplayer';
import LivePreset from 'xgplayer/es/presets/live';
import 'xgplayer/dist/index.min.css'

SimplePlayer.defaultPreset = LivePreset;

const = new SimplePlayer(options)

MobilePreset

Compared with defaultPreset, MobilePreset reduces some plugins that are not used, such as pc, keyboard, which are a subset of defaultPreset

import { SimplePlayer } from 'xgplayer';
import MobilePreset from 'xgplayer/es/presets/mobile';
import 'xgplayer/dist/index.min.css'

SimplePlayer.defaultPreset = MobilePreset;

const = new SimplePlayer(options)

Develop your own preset

Develop Preset is very easy：

// file ./mypreset.js
import PluginA from './pluginA'
import PluginB from './pluginB'
// import preset language jp
import JP from 'xgplayer/es/lang/jp'

class MyPreset {
  constructor () {
    this.plugins = [PluginA, PluginB];
    this.ignores = ['PluginC'] // Plugins to be disabled when MyPreset is enabled
    this.i18n = [JP]  // Lang Packages
  }
}

// file ./init.js
import Player from 'xgplayer'
import 'xgplayer/dist/index.min.css'
import MyPreset from './mypreset'

const player = new Player({
  ...,
  presets: ['default', MyPreset]
})

Notice

The player will disable Player.defaultPreset when using config.presets. If you want to keep Player.defaultPreset, the first item of the config.resets array must be 'default'

Built-in Preset

defaultPreset

The defaultPreset contains the following plugins:

  • Replay
  • Poster
  • Start
  • Enter
  • Miniscreen
  • PC
  • Mobile
  • Keyboard
  • Loading
  • Play
  • Progress
  • ProgressPreview
  • FullScreen
  • CssFullScreen
  • Time
  • Volume
  • Rotate
  • PIP
  • PlayNext
  • DownLoad
  • ScreenShot
  • Definition
  • PlaybackRate
  • Error
  • Prompt
  • Thumbnail
  • MiniProgress
  • Dynam13icBg

livePreset

The livePreset contains the following plugins:

  • Poster
  • Start
  • Enter
  • PC
  • Mobile
  • Keyboard
  • Loading
  • Play
  • FullScreen
  • Time
  • Volume
  • RotateIcon
  • PIP
  • CssFullScreen
  • Definition
  • PlaybackRate
  • Error

mobilePreset

The mobilePreset contains the following plugins:

  • Replay
  • Poster
  • Start
  • Enter
  • Mobile
  • Loading
  • Play
  • Progress
  • FullScreen
  • Time
  • Volume
  • Rotate
  • PIP
  • PlayNext
  • DownLoad
  • ScreenShot
  • Definition
  • PlaybackRate
  • Error
  • Prompt
  • Thumbnail
  • MiniProgress

← Known issues about Autoplay →