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

插件

西瓜播放器支持插件的扩展机制,无论是简单的功能按钮还是复杂的播放逻辑都可以通过插件的形式来实现。想让西瓜播放器与你的业务紧密结合,使用插件机制是最佳的方式。

获取插件实例

// 获取pip插件实例
const pipInstance = player.getPlugin('pip')
// OR
const pipInstance = player.plugins.pip

// 调用pip插件接口切换切换画中画
pipInstance.switchPIP()

注册插件

  1. 支持在初始化播放器实例的时候,直接传入需要的插件即可(内置插件不需要),使用方式如下:
import DemoPlugin from 'demoplugin'
import Player from 'xgplayer'

const player = new Player({
  ...,
  plugins: [DemoPlugin]
})
  1. 初始化完成之后注册插件
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视频进度条
progresspreviewpc端进度条预览插件
mobile手机交互
pc桌面视频交互
definition清晰度切换
error报错提示
fullscreen全屏切换
cssfullscreen网页全屏切换
loading加载提示
play控制条的播放、暂停按钮
poster封面图插件
enter播放器初始化到播放的缓冲组件
replay重播交互与提示
start中间播放按钮插件
volume音量控制
time当前播放时间/视频时长
playbackrate倍速选择列表
pip画中画切换按钮