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

Concept

For complex project, it's hard to manage plugins between playback scenarios. So we provide the mechanism "preset" to help you to group default plugins and custom plugins

image.png

Usage

It's really easy to pass a preset to player

import Player from 'xgplayer';
import MyPreset from './myPreset'

new Player({
  presets: [MyPreset]
})

Make a preset

It's also really easy to make a preset

import PluginA from './pluginA'
import PluginB from './pluginB'

class MyPreset {
  constructor () {
    this.plugins = [PluginA, PluginB]; // Plugins preset uses
    this.ignores: ['PluginC'] // Plugins preset ignores
  }
}

Built-in preset

Player provides VOD、live and mobile presets, and use VOD as the default preset

import Player from 'xgplayer';

// You are using VOD preset
new Player(options)

If you want to use live preset

import Player from 'xgplayer/es/player.js';
import LivePreset from 'xgplayer/es/presets/live';

Player.defaultPreset = LivePreset;

new Player(options)

If you want to use mobile preset

import Player from 'xgplayer/es/player.js';
import LivePreset from 'xgplayer/es/presets/mobile';

Player.defaultPreset = LivePreset;

new Player(options)

Pass preset to player would make the default preset be ignored, so if you want to have your preset and default preset coexist, just pass 'default' to player.config

import Player from 'xgplayer';
import MyPreset from './myPreset'

new Player({
  presets: ['default', MyPreset] // player will keep both your preset and default preset
})

If you want to ignore plugins provided by built-in presets, feel free to pass the plugin name to config.ignores

Plugins from built-in presets

VOD Preset includes plugins below:

  • Replay
  • Poster
  • Start
  • Enter
  • Miniscreen
  • PC
  • Keyboard
  • Loading
  • Progress
  • Play
  • FullScreen
  • Time
  • Volume
  • Rotate
  • PIP
  • PlayNext
  • DownLoad
  • ScreenShot
  • Definition
  • PlaybackRate
  • CssFullScreen

Live Preset includes plugins below:

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

Mobile Preset includes plugins below:

  • Poster
  • Replay
  • Start
  • Enter
  • Mobile
  • Loading
  • Progress
  • PlayIcon
  • FullScreen
  • TimeIcon
  • RotateIcon
  • PlayNextIcon
  • DownLoadIcon
  • ScreenShotIcon
  • DefinitionIcon
  • PlaybackRateIcon
  • Volume
  • Error
  • Prompt
  • Thumbnail
  • PIPIcon
  • MiniProgress