# 播放器(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`值 播放器对外的事件 ```js jessibucaPro.on(JessibucaPro.MULTI_EVENTS.blur, () => { // 窗口不可见 }) ``` ### ERROR 播放器对外的事件 等同于 `JessibucaPro` 的 `ERROR` 事件`error`里面的value 的值 ### EVENTS 播放器对外的事件 等同于 `JessibucaPro` 的 `EVENTS` 事件里面的`key`值 ```js jessibucaPro.on(JessibucaPro.EVENTS.selected, () => { // 窗口不可见 }) ``` ## 方法 ### destroySingle(windowIndex) - **参数**: - `{number} windowIndex` `选填` 窗口下标(从0开始),如果不传,则销毁目前选中的窗口 - **返回**: - `{Promise}` - **用法**: 销毁单个播放窗口播放器实例 ```js jessibucaPro.destroySingle(0).then(() => { // 销毁成功 }).catch((error) => { // 销毁失败 }) ``` ### destroy() - **返回**: - `{Promise}` - **用法**: 销毁整个jessibucaProMulti实例 ```js jessibucaPro.destroy().then(() => { // 销毁成功 }).catch((error) => { // 销毁失败 }) ``` ### setFullscreenMulti(flag) - **参数**: - `{boolean} flag` `必填` 是否全屏 - **返回**: - `{Promise}` - **用法**: 整个播放全屏/取消全屏 ```js 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` ```js jessibucaPro.arrangeWindow(1) jessibucaPro.arrangeWindow(2) jessibucaPro.arrangeWindow(3) jessibucaPro.arrangeWindow(4) jessibucaPro.arrangeWindow('3-1') jessibucaPro.arrangeWindow('4-1') ``` ### getCurrentSplit() - **返回**: - `{number}` - **用法**: 获取当前分屏数 ```js const split = jessibucaPro.getCurrentSplit() console.log(split) ``` ### getSelectedWindowIndex() - **返回**: - `{number}` - **用法**: 获取当前选中的播放窗口下标 ```js const windowIndex = jessibucaPro.getSelectedWindowIndex() console.log(windowIndex) ``` ### 其他方法 其他方法等同于 `JessibucaPro` 的方法,只是多了一个参数 `index`,用来指定操作的第几个播放器窗口,`下标从0开始` 例如 `play` 方法 ```js jessibucaProMulti.play(url, options, index).then(() => { }).catch((error) => { }); ``` ```js jessibucaProMulti.play(url, index).then(() => { }).catch((error) => { }); ``` ## 事件 ### dblSelected 双击选中事件 ```js jessibucaProMulti.on('dblSelected', (index) => { console.log('dblSelected', index); }) ``` ### selected 单击选中事件 ```js jessibucaProMulti.on('selected', (index) => { console.log('selected', index); }) ``` ### mouseOver 鼠标移入事件 ```js jessibucaProMulti.on('mouseOver', (index) => { console.log('mouseOver', index); }) ``` ### mouseOut 鼠标移出事件 ```js jessibucaProMulti.on('mouseOut', (index) => { console.log('mouseOut', index); }) ``` ### mouseUp 鼠标mouseUp事件 ```js jessibucaProMulti.on('mouseUp', (index) => { console.log('mouseUp', index); }) ``` ### 其他事件 其他事件等同于 `JessibucaPro` 的事件 事件的第一个参数是`index` 剩下的参数和`JessibucaPro`的同等事件一样 ```js jessibucaProMulti.on('xxx', (index, value) => { console.log('xxx', index, value); }) ```