morelayout-player 多宫格播放视频插件

简介

morelayout-player，是多屏播放插件，支持多宫格十几种模式切换，同时可定制化播放器或更换(当前使用easywasmplayer)；内置了云台控制，预置位控制等组件。

功能说明

• TyMoreLayout：多宫格切换组件
• TyPlayer：视频播放组件(搭配TyMoreLayout或单独使用)
• TyControl：云台控制组件(搭配TyPlayer或单独使用)
• TyPreset：预置位控制组件(搭配TyPlayer或单独使用)

使用示例

1. 下载

 npm install morelayout-player --save 或

yarn add morelayout-player --save

2. 在mian中引入

 import MoreLayerPlayer from 'morelayout-player'
 app.use(MoreLayerPlayer)

3. 使用组件(多宫格播放)

<tempalte>
   <TyMoreLayout :src="data.videoUrl" :equipment-data="data.active" @itemClick="itemClick"  @direction="direction($event)"
       @control="controlClick($event)"  >
  </TyMoreLayout>
</tempalte>

<script lang='ts' setup>
const data = reactive<DataProps>({
  videoUrl: 'http://10.0.60.155:80/index/api/webrtc?app=rtp&stream=00000017&type=play', //视频地址
  active:{name:''},//当前设备信息
})
</script>

4.使用组件(单独播放)

<tempalte>
  <TyPlayer :data="{src:videoUrl,...acIndex}">
    <template #preset="{ info }">
      <TyControl @direction="direction($event, info)" @control="controlClick($event, info)" />
      <TyPreset :data='info' />
    </template>
  </TyPlayer>
</tempalte>

<script lang='ts' setup>
const data = reactive<DataProps>({
  videoUrl: 'http://10.0.60.155:80/index/api/webrtc?app=rtp&stream=00000017&type=play', //视频地址
  active:{name:''},//当前设备信息
})
</script>

示例化参数说明

1.TyMoreLayout-参数

| 参数 | 说明 | 类型 | 必须参数 | | -------------- | ---------------- | ----------- | ---------------------- | | src | 视频播放地址 | string | true | | equipment-data | 当前视频设备信息 | object | false | | #default | 存放视频组件插槽 | currentData | | @itemClick | 当前激活窗口 | function | (acIndex:number)=>void |

2.TyPlayer-参数

| 参数 | 说明 | 类型 | 必要参数 | | ------- | ---------------- | ------ | ---------------------------------------- | | data | 播放视频信息 | object | {src:string,acIndex:number,index:number} | | #preset | 存放视频组件插槽 | info |

3.TyControl-参数

| 事件 | 说明 | 类型 | 必须参数 | | ---------- | -------- | -------- | ----------------------------------------------------- | | @direction | 方向事件 | function | (e:{mouse:string,direction:number},info:object)=>void | | @control | 环内事件 | function | (mouse:string,type:string,name:string)=>void |

4.TyPreset-参数

| 参数 | 说明 | 类型 | 必要参数 | | ---- | ------------ | ------ | ---------------------------- | | data | 播放视频信息 | object | {mainId:number,subId:string} |