接口说明
本文介绍为您介绍Web应用端播放器提供的接口。
Video.js提供的接口
Video.js框架是用于在网页上嵌入视频播放器的开源JS库。获取Video.js配置播放器全部方法,请参考Video.js。
方法 | 是否可选 | 类型 | 描述 |
---|---|---|---|
autoplay | 可选 | boolean 或string | 播放器初始化之后,是否自动播放。
说明 也可配置为 |
muted | 可选 | boolean | 是否静音:
注意 如果视频加载后就要立马播放,需要设置为true,防止被浏览器阻止播放视频。 |
controls | 可选 | boolean | 是否配置控制条:
说明 若设置为false,则只能通过调用接口控制视频播放。 |
height | 可选 | number或string | Web播放器高度。支持输入字符串或数字类型。例如: |
width | 可选 | number或string | Web播放器宽度。支持输入字符串或数字类型。例如: |
preload | 可选 | string | 是否预加载视频。可配置为如下值:
|
loop | 可选 | boolean | 是否循环播放:
|
techOrder | 必选 | Array | Video.js的默认播放顺序。本示例中,配置为 |
children | 可选 | Array或object | 定义播放器的子组件及其创建顺序。 |
poster | 可选 | string | 播放视频前显示的画面,请设置此参数为画面显示的图片的URL,播放开始后,画面会被移除。 |
FLV配置接口
参数 | 是否可选 | 类型 | 描述 |
---|---|---|---|
flv | 必选 | object | FLV流媒体视频格式相关配置。 |
reconnInterval | 必选 | number | 直播重连间隔时长,单位为毫秒。例如设置为5000。 |
reconnTimes | 必选 | number | 播放失败时,请求重连的次数。例如设置为10。 |
getStreamUrl | 必选 | function | 返回一个播放地址或者一个Promise最终返回播放地址。 |
mediaDataSource | 可选 | object | 播放源相关配置。 详细内容,请参见下文mediaDataSource接口表格。 |
flvConfig | 必选 | object | FLV播放相关的配置。 详细内容,请参见下文flvConfig接口表格。 |
mediaDataSource接口
参数 | 是否可选 | 类型 | 描述 |
---|---|---|---|
isLive | 可选 | boolean | 是否为直播流:
|
cors | 可选 | boolean | 是否支持跨域资源共享访问:
|
withCredentials | 可选 | boolean | 是否在跨域资源共享请求时携带Cookie:
|
hasAudio | 可选 | boolean | 是否包含音频:
|
hasVideo | 可选 | boolean | 是否包含视频:
推荐设置为false。 |
duration | 可选 | number | 视频的总播放时长,单位为毫秒。 |
filesize | 可选 | number | 视频大小,单位为字节。 |
flvConfig接口
方法 | 是否可选 | 类型 | 描述 |
---|---|---|---|
enableWorker | 可选 | boolean | 是否启用多线程解封视频流:
|
enableStashBuffer | 可选 | boolean | 是否启用IO暂存缓冲区:
使用直播功能时,设置false可减少延迟,并减少网络不稳定时出现画面停顿的情况。 |
stashInitialSize | 可选 | number | IO暂存缓冲区的初始化大小,默认为384 KB。 |
lazyLoad | 可选 | boolean | 如果已经有足够的播放数据,则中断HTTP取流链接:
|
lazyLoadMaxDuration | 可选 | number | 加载指定时间的视频流后停止拉流,默认为180,单位为秒。 |
lazyLoadRecoverDuration | 可选 | number | 停止拉流后多久恢复,默认为30,单位为秒。 |
deferLoadAfterSourceOpen | 可选 | boolean | 在MediaSource的sourceopen事件触发后加载。 说明 使用Chrome浏览器时,在后台打开的标签页可能不会触发sourceopen事件,您需要切换到该标签页触发sourceopen事件。 |
autoCleanupSourceBuffer | 可选 | boolean | 是否自动清理SourceBuffer:
|
autoCleanupMaxBackwardDuration | 可选 | number | 超过指定时长后自动清理SourceBuffer,默认值180,单位为秒。 |
autoCleanupMinBackwardDuration | 可选 | number | 保留指定时长的缓冲内容,默认为120,单位为秒。 |
fixAudioTimestampGap | 可选 | boolean | 检测到音视频不同步时,是否填充无声音频:
|
accurateSeek | 可选 | boolean | 是否确查找任何帧:
说明
|
customSeekHandler | 可选 | object | 处理自定义跳转。默认为 |
reuseRedirectedURL | 可选 | boolean | 对于搜索或重连等场景,是否复用HTTP状态码301或302的重定向地址:
|
referrerPolicy | 可选 | string | 使用FetchStreamLoader时,referrerPolicy默认策略为: |
headers | 可选 | object | 请求头相关设置。 |
HTML5相关接口
方法 | 是否可选 | 类型 | 描述 |
---|---|---|---|
hls | 可选 | object | HLS播放协议的相关配置。 |
cacheEncryptionKeys | 必选 | boolean | 是否缓存密钥:
说明 若设置为false,则每次获取TS格式文件前再获取一次密钥。 |
overrideNative | 可选 | boolean | 是否即使浏览器提供了HLS支持,也尝试使用videojs-http-streaming:
|
其他常用接口
play
功能:播放视频。
play() => Promise<undefined> | undefined
pause
功能:暂停播放视频。
pause() => Player
src
功能:设置播放源。
如果不传入参数,则使用获取播放源功能。
src(source?: { src: string, type: string }) => string | undefined
reset
功能:重置播放器。
调用后,会同时触发Video.js中的reset
方法。
reset() => void
load
功能:加载src中的资源。
load() => void
currentTime
功能:设置从指定时间开始播放视频。
如果不传入该参数,则返回当前的播放时间。
currentTime(seconds?: number) => number
autoplay
功能:自动播放。
需要与Video.js中autoplay
参数保持一致,如果不传参数,则获取Video.js中autoplay
的值。
autoplay(value: boolean | string) => void
paused
功能:是否为暂停状态。
paused() => boolean
on
功能:开启监听事件。
on(type: string, fn: Function) => Player
包括如下监听事件:
canplay:加载的视频流达到了播放要求。
ended:视频播放结束后触发。
error:监听播放异常时触发。
flvError:监听播放FLV视频流触发的异常。
loadeddata:浏览器加载到了视频帧时触发。
play:播放视频时触发。
playing:视频正在播放时触发,由于网络或者其它情况导致视频播放卡顿,该事件会被反复触发。
off
功能:移除监听事件。
off(type: string, fn: Function) => Player