VehicleMonitor-WEB/public/multi-api.md

播放器（Multi）API

JessibucaProMulti(options)

options 支持的参数有：

container

等同于 JessibucaPro 的 container 参数

maxSplit

• 类型：number
• 默认值：4
• 用法：

最大分屏数

split

• 类型：number
• 默认值：1
• 用法：

当前分屏数

style

• 类型：number
• 默认值：1
• 参数：
  • {string} border 选填 边框颜色 默认：#343434
  • {string} borderSelect 选填 边框选中颜色 默认：#FFCC00
  • {string} background 选填 背景颜色 默认：#000

supportDblclickContainerFullscreen

• 类型：boolean
• 默认值：false
• 用法：

是否支持双击单个播放窗口，使之全屏到container容器大小。

双击切换container内全屏/取消全屏

如果设置为true了，则会影响 supportDblclickFullscreen 这个参数的生效。默认会在内部把supportDblclickFullscreen 改为false。

其他参数

其他参数等同于 JessibucaPro 的参数

静态变量

MULTI_EVENTS

事件里面的key值

播放器对外的事件

jessibucaPro.on(JessibucaPro.MULTI_EVENTS.blur, () => {
    // 窗口不可见
})

ERROR

播放器对外的事件

等同于 JessibucaPro 的 ERROR

事件error里面的value 的值

EVENTS

播放器对外的事件

等同于 JessibucaPro 的 EVENTS

事件里面的key值

jessibucaPro.on(JessibucaPro.EVENTS.selected, () => {
    // 窗口不可见
})

方法

destroySingle(windowIndex)

• 参数：
  • {number} windowIndex 选填 窗口下标(从0开始)，如果不传，则销毁目前选中的窗口
• 返回：
  • {Promise}
• 用法： 销毁单个播放窗口播放器实例

jessibucaPro.destroySingle(0).then(() => {
    // 销毁成功
}).catch((error) => {
    // 销毁失败
})

destroy()

• 返回：
  • {Promise}
• 用法： 销毁整个jessibucaProMulti实例

jessibucaPro.destroy().then(() => {
    // 销毁成功
}).catch((error) => {
    // 销毁失败
})

setFullscreenMulti(flag)

• 参数：
  • {boolean} flag 必填 是否全屏
• 返回：
  • {Promise}
• 用法： 整个播放全屏/取消全屏

jessibucaPro.setFullscreenMulti(true).then(() => {
    // 全屏成功
}).catch((error) => {
    // 全屏失败
})

jessibucaPro.setFullscreenMulti(false).then(() => {
    // 取消全屏成功
}).catch((error) => {
    // 取消全屏失败
})

selectWindow(windowIndex)

• 参数：
  • {number} windowIndex 选填 窗口下标(从0开始)，如果不传，则销毁目前选中的窗口
• 返回：
  • {void}
• 用法： 选择某个播放窗口

arrangeWindow(split)

• 参数：
  • {number|string} split 必填 数量 num: 1, 2, 3, 4, 特殊 str: '3-1','4-1'
• 返回：
  • {void}
• 用法： 切换分屏数 1*1，2*2，3*3，4*4 不规则尺寸3-1，不规则尺寸4-1

jessibucaPro.arrangeWindow(1)
jessibucaPro.arrangeWindow(2)
jessibucaPro.arrangeWindow(3)
jessibucaPro.arrangeWindow(4)

jessibucaPro.arrangeWindow('3-1')
jessibucaPro.arrangeWindow('4-1')

getCurrentSplit()

• 返回：
  • {number}
• 用法： 获取当前分屏数

const split = jessibucaPro.getCurrentSplit()
console.log(split)

getSelectedWindowIndex()

• 返回：
  • {number}
• 用法： 获取当前选中的播放窗口下标

const windowIndex = jessibucaPro.getSelectedWindowIndex()
console.log(windowIndex)

其他方法

其他方法等同于 JessibucaPro 的方法，只是多了一个参数 index，用来指定操作的第几个播放器窗口，下标从0开始

例如 play 方法

jessibucaProMulti.play(url, options, index).then(() => {

}).catch((error) => {

});

jessibucaProMulti.play(url, index).then(() => {

}).catch((error) => {

});

事件

dblSelected

双击选中事件

jessibucaProMulti.on('dblSelected', (index) => {
    console.log('dblSelected', index);
})

selected

单击选中事件

jessibucaProMulti.on('selected', (index) => {
    console.log('selected', index);
})

mouseOver

鼠标移入事件

jessibucaProMulti.on('mouseOver', (index) => {
    console.log('mouseOver', index);
})

mouseOut

鼠标移出事件

jessibucaProMulti.on('mouseOut', (index) => {
    console.log('mouseOut', index);
})

mouseUp

鼠标mouseUp事件

jessibucaProMulti.on('mouseUp', (index) => {
    console.log('mouseUp', index);
})

其他事件

其他事件等同于 JessibucaPro 的事件

事件的第一个参数是index 剩下的参数和JessibucaPro的同等事件一样

jessibucaProMulti.on('xxx', (index, value) => {
    console.log('xxx', index, value);
})