播放器（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 全屏的意思是，播放器的容器全屏，而不是整个浏览器全屏

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

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

showSelectedBorder

类型：boolean
默认值：true
用法：

是否显示被选中的边框

draggable

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

是否支持多屏的拖拽切换位置。

supportMousemoveEvent

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

是否开启监听 mouse move 事件

其他参数

其他参数等同于 JessibucaPro 的参数

静态变量

MULTI_EVENTS

//
export const MULTI_EVENTS = {
    multiFullscreen: 'multiFullscreen',
    dblSelected: 'multiDblSelected', // 双击选中窗口
    selected: 'multiSelected', // 选中窗口
    mouseover: 'multiMouseover', // 鼠标移入
    mouseout: 'multiMouseout', // 鼠标移出
    mouseup: 'multiMouseup', // 鼠标mouseUp事件
    mousedown: 'multiMousedown', // 鼠标mouseDown事件
    mousemove: 'multiMousemove', // 鼠标mouseMove事件
    dragstart: 'multiDragstart', // 拖拽开始
    dragenter: 'multiDragenter', // 拖拽进入
    dragleave: 'multiDragleave', // 拖拽离开
    drop: 'multiDrop', // 拖拽放下
}

事件里面的key值

播放器对外的事件

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

ERROR

播放器对外的事件

等同于 JessibucaPro 的 ERROR

事件error里面的value 的值

EVENTS

播放器对外的事件

等同于 JessibucaPro 的 EVENTS

事件里面的key值

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

方法

destroySingle([windowIndex|windowUuid])

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

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

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


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

initSingle([windowIndex|windowUuid])

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

jessibucaPro.initSingle(0).then(() => {
    // 初始化成功
}).catch((error) => {
    // 初始化失败
})

jessibucaPro.initSingle('uuid').then(() => {
    // 初始化成功
}).catch((error) => {
    // 初始化失败
})

jessibucaPro.initSingle().then(() => {
    // 初始化成功
}).catch((error) => {
    // 初始化失败
})

isWindowItemHasInitPlayer([windowIndex|windowUuid])

参数：
- {number|string} windowIndex 选填 窗口下标(从0开始),或者窗口的uuid，如果不传，则销毁目前选中的窗口
返回：
- {Promise}
用法：是否播放窗口播放器初始化了player播放器

const result = jessibucaPro.isWindowItemHasInitPlayer(0);
//

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|windowUuid)

参数：
- {number|string} windowIndex 必填 窗口下标(从0开始),或者窗口的uuid
返回：
- {void}
用法：选择某个播放窗口

jessibucaPro.selectWindow(0)

const windowUuid = jessibucaPro.getSelectedWindowUuid()

jessibucaPro.selectWindow(windowUuid);

selectNextWindow([windowIndex|windowUuid],isLoop)

参数：
- {number|string} windowIndex 选填 窗口下标(从0开始),或者窗口的uuid, 如果为空，则为选中的窗口，如果没有选中窗口，无法选中下一个播放窗口
返回：
- {void}
用法：选择下一个播放窗口

如果设置了isLoop为true，当前窗口如果是最后一个窗口，则会选择第一个窗口。

const windowUuid = jessibucaPro.getSelectedWindowUuid()

jessibucaPro.selectNextWindow(windowUuid);

selectPrevWindow([windowIndex|windowUuid],isLoop)

参数：
- {number|string} windowIndex 选填 窗口下标(从0开始),或者窗口的uuid，如果为空，则为选中的窗口，如果没有选中窗口，无法选中上一个播放窗口
返回：
- {void}
用法：选择上一个播放窗口

如果设置了isLoop为true，当前窗口如果是第一个窗口，则会选择最后一个窗口。

const windowUuid = jessibucaPro.getSelectedWindowUuid()

jessibucaPro.selectPrevWindow(windowUuid);

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)

getSelectedWindowUuid()

返回：
- {string}
用法：获取当前选中的播放窗口uuid


const windowUuid = jessibucaPro.getSelectedWindowUuid()
console.log(windowUuid)

getWindowItem([windowIndex|windowUuid])

参数：
- {number|string} windowIndex 选填 窗口下标(从0开始),或者窗口的uuid，如果不传，则为选中的窗口，如果没有选中窗口，无法获取到播放窗口实例，返回null
返回：
- {Object}
  - {string} uuid 窗口的uuid
  - {number} index 窗口下标(如果开启了拖拽，会变),
  - {DOM} $player 播放器DOM
  - {DOM} $playerContainer 播放器容器DOM
  - {JessibucaPro} player 播放器实例
用法：获取单个播放窗口的实例

当开启了拖拽的时候，index 是会变的，当发生拖拽的时候，通过uuid来获取窗口实例是不会变的，但是通过index来获取窗口实例是会变的。

比如同样的下标0,当发生拖拽之后，获取到的播放器实例是不一样的。


// 获取选中的窗口实例
const windowItem = jessibucaPro.getWindowItem();

// 基于下标
const windowItem = jessibucaPro.getWindowItem(index);

// 基于uuid
const windowItem = jessibucaPro.getWindowItem('uuid');

getNextWindowItem([windowIndex|windowUuid],isLoop)

参数：
- {number|string} windowIndex 选填 窗口下标(从0开始),或者窗口的uuid，如果不传，则为选中的窗口
- {boolean} isLoop 选填 默认false, 是否循环获取下一个窗口实例。
返回：
- {Object}
  - {string} uuid 窗口的uuid
  - {number} index 窗口下标
  - {number} order 窗口的顺序下标（只有开启拖拽才会有）
  - {DOM} $player 播放器DOM
  - {DOM} $playerContainer 播放器容器DOM
  - {JessibucaPro} player 播放器实例
用法：获取下一个播放窗口的实例

如果设置了isLoop为true，当前窗口如果是最后一个窗口，则会选择第一个窗口。

const windowItem = jessibucaPro.getNextWindowItem();

const windowItem = jessibucaPro.getNextWindowItem(0);

const windowItem = jessibucaPro.getNextWindowItem('uuid');

getPrevWindowItem([windowIndex|windowUuid],isLoop)

参数：
- {number|string} windowIndex 选填 窗口下标(从0开始),或者窗口的uuid，如果不传，则为选中的窗口,如果没有选中窗口，无法获取到播放窗口实例，返回null
- {boolean} isLoop 选填 默认false, 是否循环获取上一个窗口实例。
返回：
- {Object}
  - {string} uuid 窗口的uuid
  - {number} index 窗口下标
  - {number} order 窗口的顺序下标（只有开启拖拽才会有）
  - {DOM} $player 播放器DOM
  - {DOM} $playerContainer 播放器容器DOM
  - {JessibucaPro} player 播放器实例
用法：获取上一个播放窗口的实例

如果设置了isLoop为true，当前窗口如果是第一个窗口，则会选择最后一个窗口。

const windowItem = jessibucaPro.getPrevWindowItem();

const windowItem = jessibucaPro.getPrevWindowItem(0);

const windowItem = jessibucaPro.getPrevWindowItem('uuid');

getWindowUuidList()

返回：
- {Array} uuidList
用法：获取所有播放窗口的uuid列表

这是排序过的uuid列表

const uuidList = jessibucaPro.getWindowUuidList();

resize()

返回：
- {void}
用法：重新调整视图大小
场景：当播放器的容器大小发生变化的时候，需要调用此方法重新调整视图大小

multi会根据container的宽高变化，动态调整每个播放窗口的大小。

jessibucaProMulti.resize();

toggleSingleWindowContainerFullscreen(flag,[windowIndex|windowUuid])

参数：
- {boolean} flag 选填 是否全屏,不填写会根据当前状态切换非container全屏->container全屏，container全屏-> 非container全屏
- {number|string} windowIndex 选填 窗口下标(从0开始),或者窗口的uuid，如果不传，则为选中的窗口
返回：
用法：切换单个播放窗口container全屏/取消container全屏

container 全屏的意思是，播放器的容器全屏，而不是整个浏览器全屏

jessibucaProMulti.toggleSingleWindowContainerFullscreen();

jessibucaProMulti.toggleSingleWindowContainerFullscreen(true, 1);

jessibucaProMulti.toggleSingleWindowContainerFullscreen(false, 0);

其他方法

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

例如 play 方法

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

}).catch((error) => {

});

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

}).catch((error) => {

});

事件

multiDblSelected

双击选中事件

回调参数：
- {index} index 窗口的下标
- {event} event 事件对象

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

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

multiSelected

单击选中事件

回调参数：
- {index} index 窗口的下标
- {event} event 事件对象

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

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

multiMouseover

鼠标移入事件

回调参数：
- {index} index 窗口的下标
- {event} event 事件对象

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

jessibucaProMulti.on(JessibucaProMulti.MULTI_EVENTS.mouseover, (index, event) => {
    console.log('multiMouseover', index, event);
})

multiMouseout

鼠标移出事件

回调参数：
- {index} index 窗口的下标
- {event} event 事件对象

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

// 或者
jessibucaProMulti.on(JessibucaProMulti.MULTI_EVENTS.mouseout, (index, event) => {
    console.log('multiMouseout', index, event);
})

multiMouseup

鼠标mouseUp事件

回调参数：
- {index} index 窗口的下标
- {event} event 事件对象

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

jessibucaProMulti.on(JessibucaProMulti.MULTI_EVENTS.mouseup, (index, event) => {
    console.log('multiMouseup', index, event);
})

multiMousedown

鼠标mousedown事件

回调参数：
- {index} index 窗口的下标
- {event} event 事件对象

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

jessibucaProMulti.on(JessibucaProMulti.MULTI_EVENTS.mousedown, (index, event) => {
    console.log('multiMousedown', index, event);
})

multiMousemove

鼠标mousemove事件

回调参数：
- {index} index 窗口的下标
- {event} event 事件对象

因为事件触发比较频繁，所以需要开启 supportMousemoveEvent 参数才会生效。

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

jessibucaProMulti.on(JessibucaProMulti.MULTI_EVENTS.multiMousemove, (index, event) => {
    console.log('multiMousemove', index, event);
})

multiFullscreen

整个多屏窗口全屏事件

回调参数：
- {boolean} value 是否全屏

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

jessibucaProMulti.on(JessibucaProMulti.MULTI_EVENTS.multiFullscreen, (value) => {
    console.log('multiFullscreen', value);
})

fullscreen 是单个窗口全屏的事件，回调方法里面(index, value) 第一个参数是窗口下标，第二个是全屏结果。

multiDragstart

拖拽开始事件

回调参数：
- {index} index 窗口的下标（如果开启了拖拽，会变）
- {event} event 事件对象
- {options} options
  - {string} uuid 窗口的uuid,

只有设置了 draggable 为 true 才会触发


jessibucaProMulti.on('multiDragstart', (index, evnet, options) => {
    console.log('multiDragstart', index, evnet, options);
})

jessibucaProMulti.on(JessibucaProMulti.MULTI_EVENTS.dragstart, (index, evnet, options) => {
    console.log('multiDragstart', index, evnet, options);
})

multiDragenter

拖拽进入事件

回调参数：
- {index} index 窗口的下标（如果开启了拖拽，会变）
- {event} event 事件对象
- {options} options
  - {string} uuid 窗口的uuid


jessibucaProMulti.on('multiDragenter', (index, evnet, options) => {
    console.log('multiDragenter', index, evnet, options);
})

jessibucaProMulti.on(JessibucaProMulti.MULTI_EVENTS.dragenter, (index, evnet, options) => {
    console.log('multiDragenter', index, evnet, options);
})

multiDragleave

拖拽离开事件

回调参数：
- {index} index 窗口的下标（如果开启了拖拽，会变）
- {event} event 事件对象
- {options} options
  - {string} uuid 窗口的uuid

jessibucaProMulti.on('multiDragleave', (index, evnet, options) => {
    console.log('multiDragleave', index, evnet, options);
})

jessibucaProMulti.on(JessibucaProMulti.MULTI_EVENTS.dragleave, (index, evnet, options) => {
    console.log('multiDragleave', index, evnet, options);
})

multiDrop

回调参数：
- {index} index 窗口的下标（如果开启了拖拽，会变）
- {event} event 事件对象
- {options} options
  - {string} fromUuid 选中的窗口下标
  - {string} toUuid 拖拽到的窗口下标
  - {number} fromOrderIndex 选中的窗口的顺序下标
  - {number} toOrderIndex 拖拽到的窗口的顺序下标

拖拽放下事件

jessibucaProMulti.on('multiDrop', (index, evnet, options) => {
    console.log('multiDrop', index, evnet, options);
})

jessibucaProMulti.on(JessibucaProMulti.MULTI_EVENTS.drop, (index, evnet, options) => {
    console.log('multiDragleave', index, evnet, options);
})

其他事件

其他事件等同于 JessibucaPro 的事件

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

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


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

# 播放器（Multi）API

# JessibucaProMulti(options)

# container

# maxSplit

# split

# style

# supportDblclickContainerFullscreen

# showSelectedBorder

# draggable

# supportMousemoveEvent

# 其他参数

# 静态变量

# MULTI_EVENTS

# ERROR

# EVENTS

# 方法

# destroySingle([windowIndex|windowUuid])

# initSingle([windowIndex|windowUuid])

# isWindowItemHasInitPlayer([windowIndex|windowUuid])

# destroy()

# setFullscreenMulti(flag)

# selectWindow(windowIndex|windowUuid)

# selectNextWindow([windowIndex|windowUuid],isLoop)

# selectPrevWindow([windowIndex|windowUuid],isLoop)

# arrangeWindow(split)

# getCurrentSplit()

# getSelectedWindowIndex()

# getSelectedWindowUuid()

# getWindowItem([windowIndex|windowUuid])

# getNextWindowItem([windowIndex|windowUuid],isLoop)

# getPrevWindowItem([windowIndex|windowUuid],isLoop)

# getWindowUuidList()

# resize()

# toggleSingleWindowContainerFullscreen(flag,[windowIndex|windowUuid])

# 其他方法

# 事件

# multiDblSelected

# multiSelected

# multiMouseover

# multiMouseout

# multiMouseup

# multiMousedown

# multiMousemove

# multiFullscreen

# multiDragstart

# multiDragenter

# multiDragleave

# multiDrop

# 其他事件

播放器（Multi）API

JessibucaProMulti(options)

container

maxSplit

split

style

supportDblclickContainerFullscreen

showSelectedBorder

draggable

supportMousemoveEvent

其他参数

静态变量

MULTI_EVENTS

ERROR

EVENTS

方法

destroySingle([windowIndex|windowUuid])

initSingle([windowIndex|windowUuid])

isWindowItemHasInitPlayer([windowIndex|windowUuid])

destroy()

setFullscreenMulti(flag)

selectWindow(windowIndex|windowUuid)

selectNextWindow([windowIndex|windowUuid],isLoop)

selectPrevWindow([windowIndex|windowUuid],isLoop)

arrangeWindow(split)

getCurrentSplit()

getSelectedWindowIndex()

getSelectedWindowUuid()

getWindowItem([windowIndex|windowUuid])

getNextWindowItem([windowIndex|windowUuid],isLoop)

getPrevWindowItem([windowIndex|windowUuid],isLoop)

getWindowUuidList()

resize()

toggleSingleWindowContainerFullscreen(flag,[windowIndex|windowUuid])

其他方法

事件

multiDblSelected

multiSelected

multiMouseover

multiMouseout

multiMouseup

multiMousedown

multiMousemove

multiFullscreen

multiDragstart

multiDragenter

multiDragleave

multiDrop

其他事件