morelayout-player

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}