You need to enable JavaScript to run this app.
导航

插件说明

最近更新时间2024.01.05 12:01:33

首次发布时间2023.03.02 14:00:04

VePlayer 中的功能,无论是简单的功能按钮,还是复杂的播放逻辑,均以插件的形式实现。本文提供插件介绍并为您说明如何使用插件。

插件介绍

获取插件实例

调用 getPlugin 并传入插件名称,即可获取插件实例。

const playerSdkIns = new VePlayer({
  ...
})

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

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

注册插件

在初始化 VePlayer 实例时,直接传入需要的插件名称即可注册插件(内置插件无需注册),示例代码如下:

import DemoPlugin from 'demoplugin'

const playerSdkIns = new VePlayer({
  ...,
  plugins: [DemoPlugin],
})

您也可以在初始化完成之后调用 registerPlugin 注册插件。

import DemoPlugin from 'demoplugin'

const playerSdkIns = new VePlayer({
  ...
})
playerSdkIns.player.registerPlugin(DemoPlugin)

禁用插件

VePlayer 内置了一些常用的功能插件。如需禁用某一内置插件,可采用以下方式:

  • 将插件名称(不区分大小写)传入 VePlayer 配置项的ignores 属性中。以禁用倍速调节插件和画中画插件为例:

    ignores: ['playbackRate', 'pip']
    
  • 对于部分插件,您也可以通过插件的配置项实现禁用。详见含 UI 的内置插件

配置插件

VePlayer 支持传入各个插件名称,配置插件的具体逻辑。例如配置播放进度条插件:

progress: {
   isDragingSeek: true, // 是否在拖拽的过程中更新 currentTime
   closeMoveSeek: true, // 是否关闭滑块 seek 能力
}

内置插件

VePlayer 内置了一些功能插件,不需要您额外引入,即可默认显示或者在特定条件下显示。

含 UI 的内置插件

插件名称(不区分大小写)说明是否默认显示禁用/不显示配置

controls

控制栏插件

controls: false,

// 或
controls: {
  disable: true,
}

progress

播放进度条插件

progress: false,

// 或
progress: {
  disable: true,
}

fullscreen

位于控制栏的全屏切换插件,用于将当前视频全屏切换。全屏插件默认调用系统全屏。

fullscreen: false

// 或
fullscreen: {
  disable: true
}
playbackRatePC 端倍速调节插件
PlaybackRateMobilePluginH5 端倍速调节插件

volume

音量调节插件

volume: false,
// 或
// volume: {
//   disable: true,
// }

sdkDefinitionPlugin

清晰度切换插件

仅配置了多个清晰度时显示

sdkDefinitionPlugin: {
  isShowIcon: false,
}
definitionMobilePluginH5 端清晰度切换插件仅配置了多个清晰度时显示

time

控制栏播放时间、时长显示插件

time: false,
// 或
// time: {
//   disable: true,
// }
poster播放器首帧预览图插件仅配置了图片地址时才生效不配置图片地址

start

播放器中间切换暂停/播放的按钮

start: false,
// 或
// start: {
//   disable: true,
// }
enter首次初始化播放器的时候,初始化过程中显示的加载按钮

pip

是否使用画中画插件

pip: false,
// 或
// pip: {
//   disable: true,
// }
sdkToastPlugin信息提示插件仅在切换清晰度、记忆播放时显示提醒信息

sdkUnmutePlugin

取消静音插件

仅设置了静音起播时生效

autoplay: true,
autoplayMuted: true,

sdkErrorPlugin

错误信息显示插件

仅发生阻碍播放的严重错误时才显示,会展示错误信息,并提供重试功能

DanmuPlugin弹幕插件仅配置了DanmuPlugin 时会显示弹幕设置按钮

progresspreview

PC 端进度条预览插件

仅配置了才显示

MenuPlugin

右键菜单插件

仅配置了才显示

enableContextmenu: true,
closeVideoStopPropagation: true,

miniprogress

是否启用迷你进度条

miniprogress: false, // 默认值
// 或
// miniprogress: {
//   disable: true,
// }

screenShot

是否使用截图按钮快捷方式

screenShot: false, // 默认值
// 或
// screenShot: {
//   disable: true,
// }

rotate

是否使用旋转按钮插件

rotate: false, // 默认值
// 或
// rotate: {
//   disable: true,
// }

download

是否使用下载按钮插件

download: false, // 默认值
// 或
// download: {
//   disable: true,
// }

miniscreen

进入小窗按钮插件

mini: false, // 默认值
// 或
// miniscreen: {
//   disable: true,
// }

dynamicbg

动态背景高斯模糊渲染插件

仅配置了生效

dynamicBg: {disable: false}
// 不配置 dynamicBg 或
dynamicBg: {disable: true}

配置项 position

插件配置项 position 可用于指定 UI 插件的 DOM 挂载位置。以下为定义的位置:

默认布局

flex 布局

说明

  • 如果您既没有指定 position,也没有指定 root 参数,插件默认挂载在根节点 root 下。
  • ROOT_TOP、ROOT_RIGHT、ROOT_LEFT 会在播放器失去焦点的时候自动隐藏。
  • 手机小屏 flex 布局下,中间位置自适应,一般中间位置都是进度条。

配置项 mode

Controls 插件配置项 mode 可用于指定控制栏布局方式。以下为三种布局方式的效果图:

normal

flex

bottom

配置项 index

插件配置项 index 是一个数字,用于指定 UI 插件在父节点上插入的位置,数字越小,越靠前。如果 index 相同,则按照注册顺序插入。index 可以通过配置覆盖来达到调整插件顺序的目的。

不含 UI 的内置插件

插件名称(不区分大小写)说明是否启用
keyboardPC 端快捷键插件仅 PC 端启用
mobile播放器在移动 Web 端交互插件仅 H5 端启用
pc播放器在移动 PC 端交互插件仅 PC 端启用
HlsPlayerHLS 播放插件仅播放非加密 HLS 格式时启用
FLVPlayerFLV 播放插件仅播放 FLV 格式时启用
EncryptHlsPluginHLS 加密播放插件仅播放加密 HLS 格式时启用
DashPluginDASH 播放插件仅播放 DASH 格式时启用

Mp4EncryptPlayer

MP4 加密插件,同时用来支持 MP4 格式的 MSE 播放模式

仅播放加密 MP4 格式或启用 MP4 格式的 MSE 播放模式时启用

xgVodLogger质量日志上报插件仅配置了 xgVodLogger 时才启用

业务功能插件

VePlayer 额外提供了一些外挂字幕等的业务功能插件,需要业务方自行引入加入 plugins 配置项才可使用。

外挂字幕

详见外挂字幕

记忆播放

详见记忆播放

视频镜像

详见视频镜像

播放列表

详见播放列表