playerandlayout v1.1.81
一个支持WebRtc协议的多宫格布局播放器组件
封装了两个组件:支持WebRtc协议的播放器组件、多宫格布局切换组件。用户可以根据需要使用。其中多宫格布局切换组件配置了插槽,使用时可以嵌套其他组件或代码片段。
使用说明
一、安装依赖
npm i playerandlayout
二、vue项目入口文件调用
在vue项目的入口文件'main.js',写入以下代码:
import playerandlayout from 'playerandlayout'
import 'playerandlayout/dist/public/js/iconfont.js'
Vue.use(playerandlayout)
在vue项目的运行入口文件'index.html',写入以下代码:
<script src="./ZLMRTCClient.js"></script> //按实际路径引用
以上代码便完成了playerandlayout组件的引入,需要注意的是,第三方插件ZLMRTCClient.js需要单独引用
三、组件中使用
1. 多宫格布局切换组件:
<morelayout
@getLayoutNo="getLayoutNo(arguments)"
:activeVideoNo="activeVideoNo"
:layoutWidth="myWidth"
:layoutHeight="myHeight"
>
</morelayout>
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
getLayoutNo | 返回的是一个长度为2的数组,分别代表x宫格布局下:窗口数量、活动窗口位置 | function | |
activeVideoNo | x宫格布局下的活动窗口位置 | number | 0 |
layoutWidth | 组件的宽度百分比 | number | 100 |
layoutHeight | 组件的高度百分比 | number | 100 |
2. 播放器组件:
<webrtcplayer
:currentDeviceName="DeviceName"
:videoUrl="videoUrl"
@isStar="isStar"
:isStarProp="isStarProp"
></webrtcplayer>
参数 | 说明 | 类型 | 默认值 | 示例 |
---|---|---|---|---|
currentDeviceName | 设备名称 | string | ||
videoUrl | 播放地址 | string | https://172.16.20.69/index/api/webrtc?app=live&stream=test&type=play | |
isStar | 返回的是一个布尔值,true代表已收藏,false代表未收藏 | function | ||
isStarProp | 收藏 | boolean |
3. 嵌套使用:
<morelayout
@getLayoutNo="getLayoutNo(arguments)"
:activeVideoNo="activeVideoNo"
:layoutWidth="myWidth"
:layoutHeight="myHeight"
>
<!-- eslint-disable -->
<template #default="slotProps">
<webrtcplayer
:currentDeviceName="deviceNameArr[slotProps.index]"
:videoUrl="streamUrlArr[slotProps.index]"
@isStar="isStar"
:isStarProp="isStarPropArr[slotProps.index]"
></webrtcplayer>
</template>
<!-- eslint-ensable -->
</morelayout>
注:这两个组件嵌套使用时,需要把播放器组件放到template节点中,并使用#default="slotProps"进行绑定。播放器组件建议屏蔽eslint语法检查。
四、打包发布
修改组件后需要打包发布。先检查项目webpack的输出配置以及package.json版本号,然后执行下面命令:
npm run build
....
npm publish
五、组件功能
1. 播放器组件
• 播放/暂停
• 音量
• 放大/缩小
• 截图
• 画中画
• 全屏
• WebRTC协议
2. 多宫格布局组件
• 1,4,6,8,9,16,25,36布局切换
• 活动窗口自动跳转
• 点击定位活动窗口
六、效果图
8 months ago
12 months ago
10 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago