插件
西瓜播放器支持插件的扩展机制,无论是简单的功能按钮还是复杂的播放逻辑都可以通过插件的形式来实现。想让西瓜播放器与你的业务紧密结合,使用插件机制是最佳的方式。
获取插件实例
// 获取pip插件实例
const pipInstance = player.getPlugin('pip')
// OR
const pipInstance = player.plugins.pip
// 调用pip插件接口切换切换画中画
pipInstance.switchPIP()
注册插件
- 支持在初始化播放器实例的时候,直接传入需要的插件即可(内置插件不需要),使用方式如下:
import DemoPlugin from 'demoplugin'
import Player from 'xgplayer'
const player = new Player({
...,
plugins: [DemoPlugin]
})
- 初始化完成之后注册插件
import DemoPlugin from 'demoplugin'
import Player from 'xgplayer'
const player = new Player({
...
})
player.registerPlugin(DemoPlugin)
禁用插件
// 禁用进度条播放按钮
const player = {
...,
ignores: ['play']
}
销毁/注销插件
当播放器被销毁的时候,其注册的插件也会直接被销毁,如果有特殊需求,也可以使用以下方式销毁某个插件
// 通过播放器API销毁插件
player.unRegisterPlugin('pluginame')
// 通过插件本身API销毁插件
const startPlugin = player.getPlugin('start')
startPlugin.__destroy()
内置插件列表
播放器默认的内置插件包括:
| 插件 | 意义 |
|---|---|
| controls | 控制栏插件 |
| progress | 视频进度条 |
| progresspreview | pc端进度条预览插件 |
| mobile | 手机交互 |
| pc | 桌面视频交互 |
| definition | 清晰度切换 |
| error | 报错提示 |
| fullscreen | 全屏切换 |
| cssfullscreen | 网页全屏切换 |
| loading | 加载提示 |
| play | 控制条的播放、暂停按钮 |
| poster | 封面图插件 |
| enter | 播放器初始化到播放的缓冲组件 |
| replay | 重播交互与提示 |
| start | 中间播放按钮插件 |
| volume | 音量控制 |
| time | 当前播放时间/视频时长 |
| playbackrate | 倍速选择列表 |
| pip | 画中画切换按钮 |