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

概念

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

image.png

使用

在Player的配置中，可以传入config.presets为播放器提供Preset能力

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

new Player({
  presets: [MyPreset]
})

播放器提供点播、直播、移动端三套内置Preset，根据大家使用场景的频率，将点播Preset默认安装在播放器上，当我们按照默认方式使用播放器时，我们就在使用点播Preset:

import Player from 'xgplayer';

new Player(options)

而当我们希望使用直播Preset时，我们可以这样来引用：

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

Player.defaultPreset = LivePreset;

new Player(options)

当我们希望使用移动Preset时，我们可以这样来引用：

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

Player.defaultPreset = LivePreset;

new Player(options)

值得一提的时，播放器在使用传入config.presets时会禁用掉Player.defaultPreset,如果希望保留Player.defaultPreset，可以通过传入'default'：

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

new Player({
  presets: ['default', MyPreset] // 将保留默认Preset
})

如果希望对preset中的插件进行禁用，依然可以参照config.ignores来配置。

开发

与Preset的概念一样，开发一个Preset是非常简单的：

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

class MyPreset {
  constructor () {
    this.plugins = [PluginA, PluginB]; // 使用的插件
    this.ignores: ['PluginC'] // 当MyPreset启用时，需要禁用的插件
  }
}

内置Preset说明

点播Preset包含如下插件：

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

直播Preset包含如下插件：

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