播放器(点播文件) API
点播文件特有的方法和可监听的事件
参数
playVodConfig
- 类型:
object - 默认值:
{} - 参数:TF卡流(录像流)播放配置
{boolean} showRateBtn默认值false, 是否显示倍速播放按钮{array} rateConfig默认值[], 倍速播放配置{number} value倍速播放倍数{string} label倍速播放按钮显示的文字
{boolean} useWCS默认值false, 使用wcs硬解码播放。{boolean} useMSE默认值true, 使用mse硬解码播放。{boolean} useSIMD默认值true, 使用simd硬解码播放。{number} startTime默认值0, 播放开始时间,单位秒,如果设置了startTime,则会从startTime开始请求数据,并进行播放。{number} forwardRate默认值1, 播放倍速,默认为1倍速播放。{boolean} showControl默认值true, 是否显示底部时间进度条
优先级:
useMSE>useWCS>useSIMD
const jessibucaPro = new JessibucaPro({
playType: 'playVod',
playVodConfig:{
// 配置参数
}
})
playVodEndedAndAutoReplay
- 类型:
boolean - 默认值:
false - 用法:播放结束后是否自动重播
const jessibucaPro = new JessibucaPro({
playVodEndedAndAutoReplay: true,// 播放结束后自动重播
})
playVodEndedAndShowPlayBtn
- 类型:
boolean - 默认值:
true - 用法:播放结束后是否显示播放按钮
const jessibucaPro = new JessibucaPro({
playVodEndedAndShowPlayBtn: true,// 播放结束后显示播放按钮
})
playVodMaxBufferLength
- 类型:
number - 默认值:
30单位:秒 - 用法:点播最大缓冲时长
最大缓冲长度(秒)。如果缓冲长度小于此值,将加载新片段。
const jessibucaPro = new JessibucaPro({
playVodMaxBufferLength: 20,// 点播最大缓冲长度,
})
playVodForwardMaxRateDecodeIFrame(废弃了)
- 类型:
number - 默认值:
8 - 用法:点播最大倍速只解码I帧(wasm + wcs)
该参数只在使用 wasm + wcs 时生效
播放器内部会根据当前的解码器,当前流的分辨率,设置最大倍速只解码I帧的值。
4k 视频倍率支持
| 解码器 | 分辨率 | 最大倍率 |
|---|---|---|
| Wasm | 4k | 不支持 |
| Wasm 多线程 | 4k | 不支持 |
| Wasm SIMD | 4k | 不支持 |
| Wasm SIMD 多线程 | 4k | 1倍 |
SIMD 软解码4k 只支持 3840X2160格式,4096X2160暂不支持
4k 软解码非常吃CPU性能,对于CPU有要求。测试效果不是很明显,不建议使用。
2k 视频倍率支持
| 解码器 | 分辨率 | 最大倍率 |
|---|---|---|
| Wasm | 2k | 不支持 |
| Wasm 多线程 | 2k | 1倍 |
| Wasm SIMD | 2k | 1倍 |
| Wasm SIMD 多线程 | 2k | 2倍 |
1080p 视频倍率支持
| 解码器 | 分辨率 | 最大倍率 |
|---|---|---|
| Wasm | 1080P | 1倍 |
| Wasm 多线程 | 1080P | 4倍 |
| Wasm SIMD | 1080P | 3倍 |
| Wasm SIMD 多线程 | 1080P | 4倍 |
720p 视频倍率支持
| 解码器 | 分辨率 | 最大倍率 |
|---|---|---|
| Wasm | 720p | 4倍 |
| Wasm 多线程 | 720p | 16倍 |
| Wasm SIMD | 720p | 4倍 |
| Wasm SIMD 多线程 | 720p | 16倍 |
playVodDecodeErrorAndStepTime
- 类型:
number - 默认值:
1单位:秒 - 用法:解码错误时,每次跳过的时间
该参数只在使用 MSE 时生效
const jessibucaPro = new JessibucaPro({
playVodDecodeErrorAndStepTime: 1,// 解码错误时,每次跳过的时间
})
playVodMp4UseSrc
- 类型:
boolean - 默认值:
false - 用法:是否使用
video标签原生的src属性播放Mp4文件 - 说明:如果设置为
true,则使用video标签原生的src属性播放Mp4文件,否则使用内置解封装器播放。
播放器会检测播放的mp4文件在当前的浏览器环境下,是否能够使用video的src属性播放,如果可以,则会使用video的src属性播放,否则会使用内置解封装器播放。
如果配置了
true,则会使用video的src属性播放Mp4文件,这样可以提高播放速度,原生性能会更高些,但是会失去一些功能。
如果配置了true,某些东西就检测不到,例如 sei 数据,网速检测等。
方法
playVod(url,options)
- 参数:
{string} url{object} options同playVodConfig配置参数
- 返回值:
Promise - 用法:播放点播文件,支持Hls、Mp4格式
推荐在
new JessibucaPro时配置playVodConfig参数,这样可以直接初始化播放器时就配置好播放器的参数。提高初始化速度。
catch方法里面的错误处理,主要是为了处理加载失败的情况(直接影响初始化),播放异常的情况需要通过监听
playFailedAndPaused事件来处理。
当播放失败的时候,触发
playFailedAndPaused事件。所以如果要处理重播逻辑,只需要统一在playFailedAndPaused事件里面处理就可以了,不需要在catch里面处理。
const jessibucaPro = new JessibucaPro({
playType: 'playVod',
playVodConfig:{
showRateBtn: true,
rateConfig: [
{value: 1, label: '1x'},
{value: 1.5, label: '1.5x'},
{value: 2, label: '2x'}
]
}
})
// 从10秒开始播放,2倍速播放
jessibucaPro.playVod('http://example.com/xxx.mp4',{
startTime: 10, // 从10秒开始播放
forwardRate:2,// 2倍速播放
}).then(()=>{
// 这里只是初始化成功,并不代表流已经开始播放成功。因为请求地址是个异步响应,同时也有重播的逻辑,所以这里统一是表示加载成功。
// 如果需要检查播放失败,可以查看`playVodFailedAndPaused`事件。
// 如果想要监听播放成功,可以监听`start`事件。
console.log('initialized and ready to play');
}).catch(()=>{
// 加载失败,表示后续都没法播放了。需要检查下播放环境,比如worker加载挂了。
});
在playVod()方法中初始化配置,会二次初始化播放器,加载速度会慢一些(不推荐)。
jessibucaPro.playVod('http://example.com/xxx.mp4', {
showRateBtn: true,
rateConfig: [
{value: 1, label: '1x'},
{value: 1.5, label: '1.5x'},
{value: 2, label: '2x'}
]
}).then(() => {
// 播放成功
}).catch((e) => {
// 播放失败
})
playVodPause()
- 用法:暂停播放
- 返回值:
Promise - 用法:暂停播放
jessibucaPro.playVodPause().then(() => {
// 暂停成功
}).catch((e) => {
// 暂停失败
})
playVodResume()
- 用法:恢复播放
- 返回值:
Promise - 用法:恢复播放
jessibucaPro.playVodResume().then(() => {
// 恢复成功
}).catch((e) => {
// 恢复失败
})
isPlayVodPaused()
- 返回值:
boolean - 用法:是否暂停播放
if (jessibucaPro.isPlayVodPaused()) {
// 暂停播放
} else {
// 正在播放
}
playVodForward(rate)
- 参数:
{number} rate倍速播放倍数, 支持1到16正整数倍率, 支持 0.1 到 0.9 倍速播放。
- 用法:倍速播放
- 返回值:
Promise
只支持正整数倍率,不支持类似1.5、2.5、3.5倍速播放
jessibucaPro.playVodForward(2).then(() => {
// 2倍速播放
}).catch((e) => {
// 倍速播放失败
})
playVodNormal()
- 用法:正常播放
- 返回值:
Promise - 用法:正常播放
jessibucaPro.playVodNormal().then(() => {
// 正常播放
}).catch((e) => {
// 正常播放失败
})
playVodSeek(time)
- 参数:
{number} time播放时间,从0开始,最大值为视频时长
- 返回值:
Promise - 用法:跳转到指定时间播放,单位秒,time必须是一个有效的时间
jessibucaPro.playVodSeek(10).then(() => {
// 跳转到10秒播放
}).catch((e) => {
// 跳转失败
})
playVodForwardJumping(duration)
- 参数:
{number} duration时长
- 用法:快进多少秒,
相当于执行了 playVodSeek(current+duration) 方法
jessibucaPro.playVodForwardJumping(10).then(() => {
// 快进到10秒播放
}).catch((e) => {
// 快进失败
})
playVodBackwardJumping(duration)
- 参数:
{number} duration时长,这是个相对值
- 返回值:
Promise - 用法:快退多少秒
相当于执行了 playVodSeek(current-duration) 方法
jessibucaPro.playVodForwardJumping(10).then(() => {
// 快进到10秒播放
}).catch((e) => {
// 快进失败
})
playVodNextFrame()
- 用法:播放下一帧
- 返回值:
Promise - 说明:播放下一帧
jessibucaPro.playVodNextFrame().then(() => {
// 播放下一帧成功
}).catch((e) => {
// 播放下一帧失败
})
playVodExitNextFrameAndPlay()
- 用法:退出逐帧播放,恢复正常播放
- 返回值:
Promise - 说明:退出逐帧播放,恢复正常播放
jessibucaPro.playVodExitNextFrameAndPlay().then(() => {
// 退出逐帧播放成功
}).catch((e) => {
// 退出逐帧播放失败
})
playVodNextIFrame()
- 用法:播放下一个I帧(关键帧)
- 返回值:
Promise - 说明:播放下一个I帧(关键帧)
jessibucaPro.playVodNextIFrame().then(() => {
// 退出逐帧播放成功
}).catch((e) => {
// 退出逐帧播放失败
})
playVodExitNextIFrameAndPlay()
- 用法:退出I帧(关键帧)播放,恢复正常播放
- 返回值:
Promise - 说明:退出I帧(关键帧)播放,恢复正常播放
jessibucaPro.playVodExitNextIFrameAndPlay().then(() => {
// 退出I帧播放成功
}).catch((e) => {
// 退出I帧播放失败
})
getPlayVodDuration()
- 返回值:
number - 用法:获取点播文件时长,单位秒
const duration = jessibucaPro.getPlayVodDuration()
getPlayVodCurrentTime()
- 返回值:
number - 用法:获取当前播放时间,单位秒
const currentTime = jessibucaPro.getPlayVodCurrentTime()
getPlayVodBufferedTime()
- 返回值:
number - 用法:获取当前缓冲时间,单位秒
- 说明:返回当前缓冲的最新时间。
// 缓冲时间(缓冲到最新的时间)
const bufferedTime = jessibucaPro.getPlayVodBufferedTime()
const currentTime = jessibucaPro.getPlayVodCurrentTime()
// duration 等同于 getPlayVodDuration() 方法
const duration = bufferedTime - currentTime;// 缓冲时长。
如果要计算缓存百分比,可以使用
bufferedTime / duration计算。
getPlayVodBufferedDuration()
- 返回值:
number - 用法:获取当前缓冲时长,单位秒
- 说明:返回当前缓冲的最新时长。
// 缓冲时长
const bufferedDuration = jessibucaPro.getPlayVodBufferedDuration()
getPlayVodCurrentRate()
- 返回值:
number - 用法:获取当前播放倍速
- 说明:返回当前播放倍速,如果返回值等于1,表示正常播放。如果返回值大于1,表示快进播放。
const rate = jessibucaPro.getPlayVodCurrentRate()
isPlayVodEnded()
- 返回值:
boolean - 用法:是否播放结束
if (jessibucaPro.isPlayVodEnded()) {
// 播放结束
} else {
// 正在播放
}
isPlayVodSeeking()
- 返回值:
boolean - 用法:是否正在跳转
if (jessibucaPro.isPlayVodSeeking()) {
// 正在跳转
} else {
// 没有在跳转
}
事件
playVodEnded
- 用法:播放结束时触发
jessibucaPro.on('playVodEnded', () => {
// 播放结束
})
playVodPauseOrResume
- 用法:播放暂停或恢复时触发
- 回调参数:
{boolean} isPausetrue 暂停播放,false 恢复播放
jessibucaPro.on('playVodPauseOrResume', (isPause) => {
if (isPause === true) {
// pause 播放 -> 暂停
} else {
// resume 暂停 -> 播放
}
})
playVodRateChange
- 用法:倍速播放时触发
- 回调参数:
{number} rate倍速播放倍数
jessibucaPro.on('playVodRateChange', (rate) => {
// rate 倍速播放倍数
})
playVodTime
- 用法:当前播放时间,单位秒,每秒触发一次
- 回调参数:
{number} time当前播放时间
jessibucaPro.on('playVodTime', (time) => {
// time 当前播放时间
// 等同于 getPlayVodCurrentTime() 方法
})
playVodBufferedTime
- 用法:当前最新缓冲时间,单位秒。
- 回调参数:
{number} time当前最新缓冲时间
jessibucaPro.on('playVodBufferedTime', (time) => {
// time 当前最新缓冲时间
// 等同于 getPlayVodBufferedTime() 方法
})
playVodSeek
- 用法:开始触发跳转到指定时间播放
- 回调参数:
{number} time跳转到的时间
即将废弃,建议使用
playVodSeeking事件
jessibucaPro.on('playVodSeek', (time) => {
// time 跳转到的时间
})
playVodSeeking
- 用法:开始触发跳转到指定时间播放
- 回调参数:
{number} time跳转到的时间
等同于
playVodSeek事件,但是playVodSeek事件即将废弃,建议使用playVodSeeking事件,在语义化上更加准确。
jessibucaPro.on('playVodSeeking', (time) => {
// time 跳转到的时间
})
playVodSeekEnd
- 用法:跳转到指定时间播放结束时触发
- 回调参数:
{number} time跳转到的时间
jessibucaPro.on('playVodSeekEnd', (time) => {
// time 跳转到的时间
})