播放器(点播文件) 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 视频倍率支持

解码器分辨率最大倍率
Wasm4k不支持
Wasm 多线程4k不支持
Wasm SIMD4k不支持
Wasm SIMD 多线程4k1倍

SIMD 软解码4k 只支持 3840X2160格式,4096X2160暂不支持

4k 软解码非常吃CPU性能,对于CPU有要求。测试效果不是很明显,不建议使用。

2k 视频倍率支持

解码器分辨率最大倍率
Wasm2k不支持
Wasm 多线程2k1倍
Wasm SIMD2k1倍
Wasm SIMD 多线程2k2倍

1080p 视频倍率支持

解码器分辨率最大倍率
Wasm1080P1倍
Wasm 多线程1080P4倍
Wasm SIMD1080P3倍
Wasm SIMD 多线程1080P4倍

720p 视频倍率支持

解码器分辨率最大倍率
Wasm720p4倍
Wasm 多线程720p16倍
Wasm SIMD720p4倍
Wasm SIMD 多线程720p16倍

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} optionsplayVodConfig配置参数
  • 返回值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 倍速播放倍数, 支持 116 正整数倍率, 支持 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} isPause true 暂停播放,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 跳转到的时间
})