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

Preset

概念

为了支持对播放器根据场景进行插件管理，我们提出Preset概念，Preset可以简单理解为“一组插件、语言包的集合”，当一个项目中有多种播放场景时，Preset将成为你管理插件的好帮手

image.png

播放器内置了defaultPreset、defaultPresetEn、mobilePreset、livePreset四个preset, 如果使用cdn方式引用播放器或者直接 import Player from 'xgplayer'来引用, 默认集成defaultPreset

defaultPresetEn 没有集成中文语言包，其余几个preset都集成了中文语言包

使用预置preset

注意

如果只是希望对preset中的某几个插件进行禁用，依然可以参照config.ignores来配置，不需要自己实现一个preset

defaultPresetEn

defaultPresetEn 是 defaultPreset 的子集，少了中文包的引入

/**
 * SimplePlayer 和 Player的区别是, Player集成了defaultPreset
 * 这里defaultPresetEn完全替代defaultPreset
 * 所以可以直接使SimplePlayer
 */
import { SimplePlayer } from 'xgplayer'
import defaultPresetEn from 'xgplayer/es/presets/default-en'
import 'xgplayer/dist/index.min.css'

SimplePlayer.defaultPreset = defaultPresetEn

const player = new SimplePlayer(options)

livePreset

相较于defaultPreset，减少直播用不到的一些插件，例如progress、progresspreview、time、download、screenShot等直播用不到的插件，属于defaultPreset的子集

/**
 * SimplePlayer 和 Player的区别是, Player集成了defaultPreset
 * 这里LivePreset完全替代defaultPreset
 * 所以可以直接使SimplePlayer
 */
import { SimplePlayer } from 'xgplayer'
import LivePreset from 'xgplayer/es/presets/live'
import 'xgplayer/dist/index.min.css'

SimplePlayer.defaultPreset = LivePreset

const player = new SimplePlayer(options)

mobilePreset

相较于defaultPreset，会减少只有pc端可使用的插件的引用，例如pc、keyboard等，属于defaultPreset的子集

/**
 * SimplePlayer 和 Player的区别是, Player集成了defaultPreset
 * 这里MobilePreset完全替代defaultPreset
 * 所以可以直接使SimplePlayer
 */
import { SimplePlayer, Sniffer } from 'xgplayer'
import MobilePreset from 'xgplayer/es/presets/mobile'
import 'xgplayer/dist/index.min.css'

SimplePlayer.defaultPreset = MobilePreset

const player = new SimplePlayer(options)

开发自定义preset

与Preset的概念一样，开发一个Preset是非常简单的，使用方式如下

在原有的defaultPreset的preset的基础上做扩展

/**
 * file ./myextpreset.js
 */
// 自定义组件
import PluginA from './pluginA'
import PluginB from './pluginB'
import PluginC from './pluginC'
// 引用预置语言jp
import JP from 'xgplayer/es/lang/jp'

class MyExtPreset {
  constructor (options, playerConfig) {
    this.plugins = [PluginA, PluginB, PluginC] // 使用的插件
    this.ignores = ['replay'] // 统一禁用一些内置组件
    this.i18n = [JP]  // 需要安装的语言包
    // 统一修改播放器配置
    playerConfig.controls = {
      mode: 'flex'
    }
  }
}

/**
 * file ./init.js
 */
import Player from 'xgplayer'
import MyExtPreset from './myextpreset'
import 'xgplayer/dist/index.min.css'

const player = new Player({
  ...,
  preset: ['default', MyExtPreset]  // 启用默认的default，并且扩展自己的自定义preset
})

注意

播放器在使用传入config.presets时会禁用掉Player.defaultPreset，如果希望保留Player.defaultPreset，config.presets数组第一项需要是'default'

不使用内置的preset, 自己按需求实现一个preset对内置组件和自定义组件进行组合

/**
 * file ./mypreset.js
 */
import JP from 'xgplayer/es/lang/jp'
import Start from 'xgplayer/es/plugins/start'
import Play from 'xgplayer/es/plugins/play'
import Progress from 'xgplayer/es/plugins/progress'
import 'xgplayer/dist/index.min.css'

// 自定义组件
import PluginB from './pluginB'

// 引用预置语言jp
class MyPreset {
  constructor (options, playerConfig) {
    this.plugins = [Start, Play, Progress, PluginB] // 使用的插件
    this.ignores = ['PluginC'] // 统一禁用一些内置组件
    this.i18n = [JP]  // 需要安装的语言包
    // 统一修改播放器配置
    playerConfig.controls = {
      mode: 'flex'
    }
  }
}

/**
 * file ./init.js
*/
// 因为完全自定义，不使用内置的默认defaultPreset了，使用精简版
import { SimplePlayer } from 'xgplayer'
import 'xgplayer/dist/index.min.css'
import MyPreset from './mypreset'

// 精简版设置默认preset
SimplePlayer.defaultPreset = MyPreset

const player = new Player({
  ...,
})

内置Preset说明

defaultPreset

默认preset包含插件如下：

  • 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

直播preset包含插件如下：

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

mobilePreset

移动端preset包含插件如下：

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

← 关于自动播放 →