最近更新时间:2023.08.22 18:08:51
首次发布时间:2022.07.25 11:28:38
本文为您介绍火山引擎视频云播放器(VePlayer)SDK 的配置、方法、事件与错误码。
在实例化 VePlayer 时,您可以对播放器的功能参数进行配置。支持的配置项包括但不限于:
var player = new VePlayer(options);
VePlayer 类可配置的参数如下表所示。
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
isLive | Boolean | false | 是否是直播场景。
|
id | String | 无 | 播放器容器 ID,VePlayer 将被插入在该容器中。 |
root | HTMLElement | 无 | 播放器容器,VePlayer 将被插入在该容器中。 |
url | String | 无 | 直播拉流地址。您可手动拼接或使用地址生成器生成拉流地址,详细说明请参见生成直播地址。 |
streamType | String | 无 | 直播拉流地址类型。支持的取值包括:
如果 |
playList | Array | 无 | 拉流地址列表。详细说明请参见 playListItem。
|
plugins | Any | 无 | 自定义插件。视频直播支持清晰度自动降级插件。详细信息可参见 DefinitionDemotePlugin |
languages | Object | 无 | 自定义播放器的多语言词典,可设置每个语种的词典,格式为 说明 了解更多语言的词典,请参见默认字典。 |
useSoftDecoding | Boolean | false | 是否启用软解。 说明
|
enableH265Degrade | Boolean | FALSE | 是否开启 H.265 兼容模式。开启后,如果浏览器不支持 H.265 硬解,自动降级为 H.265 软解。 |
codec | "h264" | "h265" | "h264" | 视频的实际编码格式。在使用 enableH265Degrade 开启 H.265 兼容降级模式时,建议传入该参数。 |
enableHlsMSE | Boolean | false | 开启时,优先使用 Media Source Extensions API 播放流媒体。 |
sdkErrorPlugin | Object | 无 | 播放器报错信息,支持自定义异常情况下的文案、图片以及是否提供刷新按钮等选项。详细说明请参见 SdkErrorConfig。 |
rtm | Object | 无 | 超低延时直播(RTM)配置,配置 RTM 拉流参数,详细说明请参见 RtmConfig。 说明 传入的 |
flv | Object | 无 | FLV 拉流格式配置,详细说明请参见 FlvConfig。 说明 传入的 |
hls | Object | 无 | HLS 拉流格式配置,详细说明请参见 HlsConfig。 说明 传入的 |
DanmuPlugin | Object | 无 | 弹幕及面板配置,支持配置弹幕文字大小、透明度、展示区域等参数,详细说明请参见 Danmuconfig。 |
DefinitionDemotePlugin | Object | 无 | 清晰度自动降级配置,详细说明请参见 DefinitionDemotePlugin。 |
width | String|Number | 100% | 相对于播放器容器的宽度 |
height | String|Number | 100% | 相对于播放器容器的高度 |
volume | Number | 0.6 | 默认音量,取值范围 0 ~ 1 |
autoplay | Boolean | true | 是否自动播放。
|
autoplayMuted | Boolean | true | 是否静音自动播放,该属性仅在
|
loop | Boolean | false | 是否开启循环播放。
|
poster | String | 无 | 设置封面图 |
defaultPlaybackRate | Number | 1 | 默认起播倍速,参考值包括 0.5 、0.75 、1 、1.5 、2 |
pip | Boolean | true | 是否显示画中画。
|
fullscreen | Object | 无 | 全屏相关配置,详细说明请参见 fullscreen。 |
lang | String | zh | 播放器语言选择列表。支持自定义,默认语言类型包括:
|
liveInfoPanel | Object | 无 | 直播信息展示面板,目前支持展示 hls 和 flv 格式的直播信息,详细说明请参见 LiveInfoPanel。 说明 使用直播信息展示面板,需要先引入 LiveInfoPanel 插件: |
timeShiftPlugin | Object | 无 | 直播时移配置。参数说明请参见 TimeShiftPlugin;接入方法请参见功能接入。 |
liveLogger | Object | 无 | 直播日志配置。详细说明请参见 liveLogger;接入方法请参见功能接入。 |
playsinline | Boolean | true | 是否启用内联播放模式。
该配置项只在移动端生效,当取值为 true 的时候,会在初始化 video 或 audio 对象的时候,将 说明
|
videoAttributes | Object | 无 | video 扩展属性,初始化时会设置在 videoElement 或 audioElement 对象上,请参考 HTMLMediaElement 查看其支持的属性配置。 |
fluid | Boolean | false | 是否启用流式布局。
说明 启用流式布局时:
|
fitVideoSize | String | fixed | 播放器容器尺寸适配方式,在视频资源初始化之后,根据获取到的 videoWidth 和 videoHeight 值对播放器容器宽高比例进行调整,可选项有:
|
videoFillMode | String | auto | video 画面填充模式,可选项有:
|
marginControls | Boolean | false | 是否开启画面和控制栏分离模式。设置为关闭时,控制栏将会常驻,与视频画面不重叠。
|
x5-video-player-type | String | h5 | 启用微信同层播放,设置值为 H5。 |
x5-video-player-fullscreen | Boolean | false | 是否启用微信全屏播放模式。
|
x5-video-orientation | String | landscape|portrait | 微信横竖屏控制。支持如下取值。
|
全屏相关配置。
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
rotateFullscreen | Boolean | false | 切换全屏时,是否旋转为横屏播放,通常在移动端使用。如果开启横屏播放,切换全屏时,将在竖屏状态下把播放器旋转 90 度,实现横屏效果。该配置优先级高于
|
useCssFullscreen | Boolean | false | 是否使用页面全屏代替系统全屏功能
|
needBackIcon | Boolean | false | 全屏的时候是否显示右上角返回按钮,通常在移动端开启。
|
弹幕配置参数如下表所示。
参数 | 类型 | 默认值 | 描述 |
---|---|---|---|
opacity | Number | 99 | 弹幕透明度。支持的取值包括:
|
area | Number | 99 | 弹幕区域大小。支持的取值包括:
|
speed | Number | 40 | 弹幕滚动速度。支持的取值包括:
|
fontSize | Number | 50 | 弹幕字体大小。支持的取值包括:
|
active | Boolean | false | 是否开启弹幕
|
usePanel | Boolean | true | 是否展示弹幕设置面板
|
danmuItems | Array | 无 | 弹幕列表,详细信息请参见 DanmuItem |
弹幕列表参数如下表所示。
参数 | 类型 | 默认值 | 描述 |
---|---|---|---|
id | String | 无 | 弹幕唯一 ID |
txt | String | 无 | 弹幕文案 |
start | Number | 无 | 弹幕出现时间,单位为 ms |
duration | Number | 无 | 弹幕持续显示时间,单位为 ms |
style | Object | 无 | 弹幕样式。例如,style : { color: '#ff9500', fontSize: '20px', padding: '2px 11px'} |
配置清晰度自动降级前,需要先引入 DefinitionDemotePlugin 插件。plugins: [window.VePlayer.DefinitionDemotePlugin]
。
清晰度自动降级参数如下表所示。
参数 | 类型 | 默认值 | 描述 |
---|---|---|---|
oftenWaitingCount | Number | 3 | 频繁等待的次数阈值。等待时间超过 OftenWaitingTime 的次数大于该值,即频繁等待 |
oftenWaitingTime | Number | 5000 | 频繁等待的时间阈值,单位为 ms。等待时间超过该值的次数大于 OftenWaitingCount ,即频繁等待 |
longWaitingTime | Number | 5000 | 等待超时的时间阈值,单位为 ms。等待超过该值,即为等待超时 |
isNeedAutoDemote | Boolean | false | 是否自动触发降级 |
demotePriority | Array | ['uhd', 'hd', 'sd', 'ld', 'ao'] | 降级顺序,按照数组顺序依次降级,数组中的元素与 playList 中的 definition 相对应 |
拉流地址列表,可配置多线路和多清晰度,参数说明如下表所示。接入实例可参考:
参数 | 类型 | 默认值 | 描述 |
---|---|---|---|
streamType | String | 无 | 直播拉流地址类型。支持的取值包括:
如果 |
url | String | 无 | 直播拉流地址。您可通过手动拼接或地址生成器生成,详细说明请参见生成直播地址。 |
definition | String | 无 | 清晰度标识,例如,'uhd'、'hd'、'sd'、'ld'、'ao' |
definitionTextKey | String |
| 多语言词典中对应的标识。缺省情况,显示 |
lineId | String | 无 | 线路唯一 ID |
lineTextKey | String | 无 | 多语言词典中对应的 Key。 |
backUrlList | Array | 无 | 降级拉流地址。当 sdkErrorPlugin.isNeedDemoteBack 为 true 时,如果主流发生错误,可自动降级到此拉流地址 |
播放器报错信息配置,参数说明如下表所示。
参数 | 类型 | 默认值 | 描述 |
---|---|---|---|
errorImg | Boolean | true | 报错时是否显示提示图片
|
errorTips | Boolean | true | 报错时是否展示报错文案。 |
isNeedRefreshButton | Boolean | true | 报错时是否显示“刷新”按钮。
|
retryLoopNum | Number | 1 | 报错后重试次数 |
isNeedDemoteBack | Boolean | false | 播放发生错误时是否进行降级。
|
超低延时直播 RTM 配置,参数说明如下所示。
参数 | 类型 | 默认值 | 描述 |
---|---|---|---|
loadTimeout | Number | 5000 | RTM 拉流请求超时等待时间,单位 ms |
retryDelay | Number | 1000 | RTM 拉流请求失败时重试时间间隔,单位 ms |
retryCount | Number | 0 | RTM 拉流请求失败时的重试次数 |
backupURL | String | 无 | RTM 起播建联失败时降级到 flv 或 hls 的拉流地址。
|
backupStreamType | String | 无 | 备用拉流地址的协议类型,需要与
|
FLV 格式流相关配置,参数说明如下所示。
说明
FLV 格式流相关配置仅适用于支持 MSE 播放的 PC 端浏览器和安卓端浏览器。
参数 | 类型 | 默认值 | 描述 |
---|---|---|---|
loadTimeout | Number | 10000 | FLV 格式拉流网络请求超时等待时间,单位 ms。 |
retryDelay | Number | 1000 | FLV 格式拉流网络请求失败重试时间间隔,单位 ms。 |
retryCount | Number | 0 | FLV 格式拉流网络请求失败时的重试次数。 说明 retryCount 参数仅在网络错误时生效;发生其他错误时 retryCount 配置不生效,例如,解码失败时播放器不会根据 retryCount 配置的值进行重试。 |
HLS 格式流相关配置,参数说明如下所示。
说明
HLS 格式流相关配置仅适用于支持 MSE 播放的 PC 端浏览器和安卓端浏览器。
参数 | 类型 | 默认值 | 描述 |
---|---|---|---|
loadTimeout | Number | 10000 | HLS 格式拉流网络请求超时等待时间,单位 ms。 |
retryDelay | Number | 1000 | HLS 格式拉流网络请求失败时重试时间间隔,单位 ms。 |
retryCount | Number | 0 | HLS 格式拉流网络请求失败时的重试次数。 说明 retryCount 参数仅在网络错误时生效;发生其他错误时 retryCount 配置不生效,例如,解码失败时播放器不会根据 retryCount 配置的值进行重试。 |
视频详细数据面板配置,显示后可以在播放视窗中查看当前直播视频的格式、码率、帧率等信息,参数说明如下表所示。
参数 | 类型 | 默认值 | 描述 |
---|---|---|---|
visible | Boolean | true | 是否显示视频详细信息面板
|
showH265Info | Boolean | false | 是否显示 H.265 软解的解码效率、解码消耗等信息。
说明
|
直播时移参数配置,参数说明如下表所示。
参数 | 类型 | 默认值 | 描述 |
---|---|---|---|
livingStartTime | Number | 当前时间 | 直播开始时间,Unix 时间戳,单位为 s,需要传入浏览器本地时间 |
maxMoveTime | Number | 604800 | 最大时移时间,单位为 s,取值范围为 [6,604800] |
直播日志配置,参数说明如下表所示。
参数 | 类型 | 默认值 | 描述 |
---|---|---|---|
appId | String | 无 | 应用 ID,可登录控制台查询 |
enable | Boolean | true | 是否开启日志上传。
|
本节为您介绍 VePlayer 的方法和调用示例。
监听拉流相关的事件。
类型
(action: string, func: (...args: any[]) => void) => void
参数
action
:类型为 string
func
:类型为 (...args: any[]) => void
示例
veplayer.on('player_create_finish', () => { console.log('播放器创建完成') })
监听事件,事件处理函数只执行一次。
类型
(action: string, func: (...args: any[]) => void) => void
参数
action
:类型为 string
func
:类型为 (...args: any[]) => void
示例
veplayer.once('player_create_finish', () => { console.log('播放器创建完成') })
解绑事件监听。
类型
(action: string, func: (...args: any[]) => void) => void
参数
action
:类型为 string
func
:类型为 (...args: any[]) => void
示例
veplayer.off('player_create_finish')
销毁当前实例。
类型
() => Promise<void>
示例
veplayer.destroy()
播放视频。
类型
() => Promise<void>
示例
veplayer.player.play() // 或者 veplayer.player.play().then(() => { // 播放成功 }).catch(() => { // 播放失败,一般发生于未经用户交互时的自动播放 })
暂停播放。
示例
veplayer.player.pause()
刷新。
示例
veplayer.player.retry()
切换地址。
类型
(src: string) => void
示例
veplayer.switchURL('url');
重置当前实例状态,暂停视频并且将当前实例状态设置为起播之前的状态,累计播放时长的计算结果会清空,播放器容器 DOM 上的类名会重置为起播之前的状态。
示例
veplayer.player.resetState();
调用 player.resetState()
重置实例状态、注销所有已经注册的组件,并且将当前实例的配置恢复为默认值。
示例
veplayer.player.reset();
更新配置信息,如果新的配置列表中包含内置插件的配置项,则会调用内置插件的 setConfig
对其进行更新。
类型
(config: Config) => void
示例
veplayer.player.setConfig({url: '另一个url'})
播放器获取焦点,调用该 API,veplayer.player.isActive
将会变为 true
,会触发 Events.veplayer.player_FOCUS
事件。
类型
(config?: { autoHide?: boolean, delay?: number }) => void
参数
autoHide
:是否需要自动隐藏,默认为 true
,即经过 delay
时长之后,会自动调用 veplayer.player.blur()
delay
:自动隐藏延迟时长,单位 ms,当 autoHide: false
的时候,忽略该配置项,默认取 veplayer.player.config.inactive
示例
veplayer.player.focus()
播放器失去焦点,调用该 API,veplayer.player.isActive
将会变为 false
,会触发 Events.PLAYER_BLUR
事件。
类型
(config?: { ignorePaused?: boolean }) => void
参数
ignorePaused
:是否忽略暂停状态,默认值是 true
,默认暂停的时候不取消焦点状态。
示例
veplayer.player.blur()
检测当前浏览器是否能播放指定类型的视频,实现的代码示例如下:
类型
(mimeType?: string) => boolean
示例
const mimeType = 'video/mp4; codecs="avc1.64001E, mp4a.40.5"' veplayer.player.canPlayType(mimeType);
返回 currentTime 所处的缓冲时间范围,start 表示缓冲起始时间,end 表示缓存截止时间。
类型
(timeRanges?: TimeRanges) => [number, number]
参数timeRanges
:时间范围
示例
const [start, end] = veplayer.player.getBufferedRange();
验证某个时间点是否在当前缓冲区间内。
类型
(time: number) => boolean
示例
const flag = veplayer.player.checkBuffer(10);
全屏。如果该接口调用的时候处于网页全屏状态会自动退出网页全屏,下发事件 Events.FULLSCREEN_CHANGE
。
类型
(el?: HTMlElement) => Promise<void>
参数el
:全屏作用的 DOM 节点,如果不传默认是 veplayer.player.root
,必须是 veplayer.player.root
的父辈节点。
示例
// 监听全屏变化 veplayer.player.on(Events.FULLSCREEN_CHANGE, (isFullscreen) => { if (isFullscreen) { // 全屏 } else { // 退出全屏 } }) // 播放器进入全屏状态 veplayer.player.getFullscreen()
退出全屏。该接口调用会下发事件 Events.FULLSCREEN_CHANGE
,isFullscreen
为 false。
类型
(el?: HTMlElement) => Promise<void>
参数el
:全屏作用的 DOM 节点,默认不传会获取 getFullscreen
作用的节点,必须是 veplayer.player.root
的父辈节点。
示例
veplayer.player.exitFullscreen()
播放器进入网页全屏,利用 CSS 模拟实现全屏效果。如果该接口调用的时候处于全屏状态,会自动退出全屏,下发事件 Events.CSS_FULLSCREEN_CHANGE
。
类型
(el?: HTMlElement) => Promise<void>
参数el
:全屏作用的 DOM 节点,传入参数须是播放器容器 veplayer.player.root
的父辈节点,默认为播放器容器 veplayer.player.root
。
示例
// 监听网页全屏变化 veplayer.player.on(Events.CSS_FULLSCREEN_CHANGE, (isFullscreen) => { if (isFullscreen) { // 网页全屏 } else { // 退出网页全屏 } }) veplayer.player.getCssFullscreen()
退出网页全屏状态。调用该接口会下发事件 Events.CSS_FULLSCREEN_CHANGE
, isFullscreen
为 false
。
类型
(el?: HTMlElement) => Promise<void>
参数el
:全屏作用的 DOM 节点,默认不传会获取 getCssFullscreen
作用的节点,且必须是 veplayer.player.root
的父辈节点。
示例
veplayer.player.exitCssFullscreen()
增加类名,给播放器容器 veplayer.player.root
添加 CSS 类名。
类型
(className: string) => void
示例
veplayer.player.addClass('className')
移除类名,给播放器容器 veplayer.player.root
移除 CSS 类名。
类型
(className: string) => void
示例
veplayer.player.removeClass('className')
判定类名,判断播放器容器 veplayer.player.root
是否存在 CSS 类名。
类型
(className: string) => boolean
示例
const flag = veplayer.player.hasClass('className')
设置属性,给播放器容器 veplayer.player.root
设置属性。
类型
(key: string, value: any) => void
示例
veplayer.player.setAttribute('key', 'value')
在当前播放器获取插件的实例。
示例
const pluginInstance = veplayer.player.getPlugin('pluginName')
在当前播放器上注册某个插件。
类型
(plugin: Function | { plugin: Function; options: object; }, config?: { [propName: string]: any; }) => PluginInstance
参数
plugin
: 插件构造函数。config
:可选参数,config 插件配置列表。示例
const pluginInstance = veplayer.player.registerPlugin(MyPlugin)
在当前播放器上销毁或者注销某个插件。
类型
(plugin: { pluginName: string } | string, removedFromConfig?: boolean) => void
参数
plugin
:插件实例或者插件名称。removedFromConfig
:注销实例的同时,是否同时将其从 veplayer.player.config.plugins 中移除,默认 false
。示例
const pluginInstance = veplayer.player.unRegisterPlugin(pluginName)
属性大部分为只读类型,部分属性支持写入。以外层容器 DOM 对象root
为例,该属性是只读类型,能通过 get 方式获取容器设置,不能通过 set 方式设置容器。而视频音量 volume
属性是可读可写类型,不仅支持“对象通过 get 方式获取音量,还支持通过 set 方式设置音量。
const veplayer = new VePlayer({ id: 'video', width: 800, height: 500, url: 'xx.flv' }); // 获取外层容器 DOM const root = veplayer.player.root; // 获取视频音量 const curVolume = veplayer.player.volume; // 设置音量 veplayer.player.volume = 0.1;
参数 | 类型 | 读写类型 | 描述 |
---|---|---|---|
config | Object | 只读 | 当前播放器的配置对象。 |
root | HTMLElement | 只读 | 播放器外层容器 DOM 对象。 |
video | Object | 只读 | 媒体对象,通常是 videoElement/audioElement 。 |
autoplay | Boolean | 可读可写 | 设置/获取是否自动播放。
|
buffered | TimeRange | 只读 | 获取当前已缓冲的时间范围。 |
played | TimeRange | 只读 | 获取已经播放的音频/视频的时间范围。 |
crossOrigin | String | 可读可写 | 设置/获取是否跨域 crossorigin |
currentSrc | String | 可读可写 | 设置/获取当前视频的播放地址。 |
cumulateTime | Number | 只读 | 获取视频累计播放时长,单位为 s。 |
volume | Number | 可读可写 | 设置/获取视频的音量,取值范围为 0-1。 |
muted | Boolean | 可读可写 | 设置/获取视频静音状态。
|
defaultMuted | Boolean | 只读 | 是否默认静音,只在初始化的时候生效。
|
error | MediaError | String | 只读 | 媒体错误对象 |
src | String | 可读可写 | 设置/获取当前视频的地址,设置时为切换当前播放的视频源。 |
lang | String | 可读可写 | 设置/获取当前语言。 |
control | Plugin | 可读可写 | 播放器控制栏插件对象,具体针对控制栏的说明,可参见 拉流 SDK 内置插件说明。 。 |
innerContainer | HTMLElement | 只读 | 内置容器 DOM 对象,该属性只有在画面和控制栏互不重叠情况下存在,即当配置 config.marginControls 参数配置为 true 的时候存在。 |
参数 | 类型 | 读写类型 | 描述 |
---|---|---|---|
state | String | 只读 | 播放器当前所处的状态,其状态枚举值、枚举名称和说明如下:
|
ended | Boolean | 只读 | 当前视频是否播放结束。 |
paused | Boolean | 只读 | 当前视频是否处于暂停状态。 |
networkState | String | 只读 | 视频的网络状态,其状态枚举值、枚举名称和说明如下:
|
readyState | String | 只读 | 视频的就绪状态,其状态枚举值、枚举名称和说明如下:
|
isFullscreen | Boolean | 只读 | 播放器是否处于全屏状态。 |
isCssfullScreen | Boolean | 只读 | 播放器是否处于网页全屏状态。 |
isSeeking | Boolean | 只读 | 是否处于快进/快退状态。 |
isActive | Boolean | 只读 | 是否处于焦点状态,处于焦点状态会显示控制栏。 |
VePlayer 是基于事件驱动的逻辑模型,其在关键逻辑处理或状态变化时会触发相应事件。您可根据业务需要监听事件并执行自定义回调。
SDK 事件指 VePlayer 视频直播播放器配置相关的事件。
事件名 | 值 | 回调参数 | 描述 |
---|---|---|---|
PLAYER_CREATED_FINISH | player_create_finish | undefined | 播放器完成创建 |
PLAYER_REBUILD | player_rebuild | undefined | 播放器重建 |
DANMU_CHANGE |
|
| 弹幕配置发生变化 |
CANCEL_UNMUTE | cancel_unmute | undefined | 取消静音 |
REFRESH_CLICK | refresh_click | undefined | 触发刷新 |
PLAY_BACKUP_CHANGE |
|
| 报错时触发降级 |
PLAY_BACKUP_CHANGE_FINISH | play_backup_change_finish | undefined | 报错时触发所有降级结束 |
PLAY_ERROR_BUTTON_CLICK | play_error_button_click | undefined | 报错时触发重试 |
PlAY_URL_CHANGE |
|
| 拉流地址改变 |
SHOW_PLAY_ERROR | show_play_error | undefined | 展示报错 |
LONG_WAITING | long_waiting | undefined | 长时间等待 |
OFTEN_WAITING | often_waiting | undefined | 频繁等待 |
DEFINITION_DEMOTE |
|
| 清晰度降级 |
LINE_CHANGE |
|
| 线路切换 |
ERROR | error | Error | 报错信息,监听返回格式为 Error,其中 message 为错误信息,errorCode 为错误码 |
监听报错信息事件代码示例
veplayer.on('error', (error) => { // error 处理 })
播放器媒体事件指浏览器 video
原生触发的事件。
事件名 | 枚举值 | 回调参数 | 含义 |
---|---|---|---|
LOAD_START | loadstart | undefined | 视频内容开始加载 |
LOADED_DATA | loadeddata | undefined | 视频起播数据加载完成 |
PLAY | play | undefined | 播放 |
PAUSE | pause | undefined | 暂停 |
ENDED | ended | undefined | 结束 |
AUTOPLAY_PREVENTED | autoplay_was_prevented | undefined | 自动播放失败 |
PLAYING | playing | undefined | 恢复播放(包括暂停后恢复播放或卡顿后恢复播放) |
SEEKING | seeking | undefined | seek 播放 |
SEEKED | seeked | undefined | seek 完成 |
TIME_UPDATE | timeupdate | undefined | 播放时间改变 |
WAITING | waiting | undefined | 等待加载数据 |
CANPLAY | canplay | undefined | 视频缓冲足够数据,可以播放 |
CANPLAY_THROUGH | canplaythrough | undefined | 视频可以流畅播放 |
VOLUME_CHANGE | volumechange | undefined | 音量发生变化 |
监听音量变化事件代码示例
veplayer.on('volumechange', () => { const muted = veplayer.muted // 是否静音 Boolean const volume = veplayer.volume // 音量 0-1 })
播放器扩展事件指播放器在媒体事件之外扩展的事件。
事件名 | 枚举值 | 回调参数 | 含义 |
---|---|---|---|
READY | ready | undefined | 播放器完成实例化 |
COMPLETE | complete | undefined | 播放器创建 video 完成,可以开始播放 |
URL_CHANGE |
|
| 播放资源发生变化,player.src='xxx' |
PLAYER_FOCUS | focus | undefined | 播放器聚焦 |
PLAYER_BLUR | blur | undefined | 播放器失焦 |
FULLSCREEN_CHANGE |
|
| 全屏状态切换 |
CSS_FULLSCREEN_CHANGE |
|
| 样式全屏状态切换 |
MINI_STATE_CHANGE |
|
| 画中画播放模式切换 |
DESTROY | destroy | undefined | 播放器销毁 |
REPLAY | replay | undefined | 播放器重新播放 |
RETRY | retry | undefined | 重试 |
DEFINITION_CHANGE |
|
| 清晰度发生变化 |
VIDEO_RESIZE |
|
| 播放器容器尺寸发生变化 |
PIP_CHANGE | pip_change | boolean | 画中画状态切换 |
ROTATE | rotate | undefined | 播放器被旋转 |
|
|
| 播放器内置快捷键事件触发 |
SEI_PARSED | SEI_PARSED | undefined | SEI 信息解析 |
|
|
| 内置插件用户行为触发,所有内置插件用户行为交互都会下发该事件,可用于用户行为埋点 |
监听全屏状态变化事件代码示例
veplayer.on('fullscreen_change', (isFullscreen) => { if (isFullscreen) { // 全屏 TODO } else { // 退出全屏 TODO } })
const error = { errorType: string, // 错误类型 errorCode: number, // 错误码 message: string, // 错误信息 mediaError?: { // video.error code: number, message?: string }, originError?: {}, // 原始错误对象 readyState: number, // mediaElement readyState networkState: number,// mediaElement networkState currentTime: number, // 当前播放到的时间点 duration: number, // 视频时长 ended: boolean, src: any, url?: string, // network error的时候有,请求出现问题的url httpCode?: number // network error的时候有,请求返回的是httpCode }
错误码信息如下所示。
错误码 | 错误码含义 | 建议处理方式 |
---|---|---|
5101 | (v1.5.1 及以上版本)获取数据过程被中止。可能的原因有网络中断或浏览器发生异常 | 请先检查浏览器的网络请求是否正常,再尝试重新播放 |
5102 | (v1.5.1 及以上版本)网络发生错误,无法成功获取媒体文件 | 请先检查浏览器的网络请求是否正常,再尝试重新播放 |
5103 | (v1.5.1 及以上版本)浏览器在解码媒体资源时发生错误。可能的原因有视频数据异常或解码器解码失败 |
|
5104 | (v1.5.1 及以上版本)因视频格式不支持、服务器或网络的问题造成视频无法加载 |
|
1 | (v1.5.0 及以下版本)获取数据过程被中止。可能的原因有网络中断或浏览器发生异常 | 请先检查浏览器的网络请求是否正常,再尝试重新播放 |
2 | (v1.5.0 及以下版本)网络发生错误,无法成功获取媒体文件 | 请先检查浏览器的网络请求是否正常,再尝试重新播放 |
3 | (v1.5.0 及以下版本)浏览器在解码媒体资源时发生错误。可能的原因有视频数据异常或解码器解码失败 |
|
4 | (v1.5.0 及以下版本)因视频格式不支持、服务器或网络的问题造成视频无法加载 |
|
1100 | 处理和解析 HLS 格式的视频流时发生了错误 | 请检查 M3U8 文件封装格式是否符合 HLS 标准 |
2100 | 网络错误 | 请检查请求播放地址,是否返回 403(过期或者权限验证失败) |
2101 | 网络请求超时 | 请检查播放地址是否合法 |
3100 | FLV 解封装出错,可能原因包括文件损坏、不完整或者不符合 FLV 文件格式规范等 | 请联系技术支持 |
3200 | TS 解封装出错,可能原因包括文件损坏、不完整或者不符合 TS 文件格式规范等 | 请联系技术支持 |
5200 | MSE addSourceBuffer 出错 | 请联系技术支持 |
5201 | MSE appendBuffer 出错 | 请联系技术支持 |
5202 | MSE 其他错误 | 请联系技术支持 |
8100 | 参数错误 | 请检查参数是否合法 |
8200 | 其他错误 | 请联系技术支持 |