1.0.3 • Published 3 years ago
vue-h5player-components v1.0.3
描述
本组件库包含3个基于bonc-htmlplayer内核进行封装的vue组件。
安装
# 安装
npm i vue-h5player-components --save
1.VideoPlayer
VideoPlayer用于播放单个实时视频,具有清除、全屏、截图、云台控制、放大缩小等功能
代码示例:
<template>
<div class="videoPlayer">
<div class="left">
<Button @click="startVideo()">开始播放</Button>
<Button @click="handleClear()">停止播放</Button>
</div>
<div class="videoBox">
<video-player
:showPause="false"
:showDownload="false"
@toYunControl="toYunControl"
@handlePTZControlVideo="handlePTZControlVideo"
ref="videoEl"></video-player>
</div>
</div>
</template>
<script>
import {VideoPlayer} from "vue-h5player-components";
export default {
components:{VideoPlayer},
data(){
return {}
},
methods:{
startVideo(){
let channelInfo1 = {
DeviceIP: "192.168.1.188",
DevicePort: "554",
DeviceType: "1101",
ChannelNum: "0",
PassWord: "123",
StreamServerIP: "172.16.96.165",
StreamServerPort: "10088",
UserName: "admin",
ChannelId: "47ce58b1362c43c898269d299d203c23-0000",
name: "172.16.67.250",
code: "47ce58b1362c43c898269d299d203c23-0000",
ptzLock: "",
}
this.$refs.videoEl.playVideo(channelInfo1)
},
//清除
handleClear(){
this.$refs.videoEl.toClear()
},
//云台控制
toYunControl(id,callback){
callback(true)
},
//云台操作
handlePTZControlVideo(ptzCmd){
console.log(ptzCmd)
},
},
}
</script>
<style scoped>
.videoPlayer{
width: 100%;
height: 100%;
display: flex;
}
.left{
width: 200px;
}
.videoBox{
flex: 1;
}
</style>
属性
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
type | video组件类型,0实时视频,1回放 | number | 0 |
showPause | 暂停按钮显示 | boolean | true |
showLock | 云台锁定按钮显示 | boolean | false |
showMark | 帧标记按钮显示 | boolean | false |
showParam | 视频参数按钮显示 | boolean | false |
showBitRate | 码率按钮显示 | boolean | false |
showWatermark | 水印按钮显示 | boolean | false |
showPlayback | 回放按钮显示 | boolean | false |
showTVwall | 发送电视墙按钮显示 | boolean | false |
showDownload | 下载按钮显示 | boolean | true |
showCut | 截图按钮显示 | boolean | true |
showFillScreen | 自适应按钮显示 | boolean | true |
showZoom | 放大按钮显示 | boolean | true |
showControl | 云台控制按钮显示 | boolean | true |
showRecord | 本地录像按钮显示 | boolean | true |
showFullScreen | 全屏按钮显示 | boolean | true |
showClear | 清除按钮显示 | boolean | true |
实例方法
playVideo(channelInfo)
配置项 | 必选 | 类型 | 说明 |
---|---|---|---|
DeviceType | 是 | String | 摄像头类型编号 |
DeviceIP | 是 | String | 视频的通道ID |
StreamServerIP | 是 | String | 流服务IP |
StreamServerPort | 是 | String | 流服务端口 |
DevicePort | 是 | String | 设备端口 |
UserName | 是 | String | 用户名 |
PassWord | 是 | String | 密码 |
ChannelNum | 是 | String | 通道数 |
2.VideoPlayerPannel
VideoPlayerPannel用于实时播放多个视频
示例代码
<template>
<div id="app">
<div class="btn">
<div><Button @click="startVideo(1)">播1路</Button></div>
<div><Button @click="startVideo(2)">播2路</Button></div>
</div>
<div class="videoPannel">
<video-player-pannel
ref="VideoPannel"
:treeList="treeList"
@startCount="startCount"
@toSelectMark="toSelectMark"
@toPanLock="toPanLock"
@toDelSign="toDelSign"
@toSendTVwall="toSendTVwall"
@toYunControl="toYunControl"
@handlePTZControlVideo="handlePTZControlVideo"
></video-player-pannel>
</div>
</div>
</template>
<script>
import {VideoPlayerPannel} from "vue-h5player-components";
export default {
components: { VideoPlayerPannel },
name: "app",
data() {
return {
channelInfo1: {
DeviceIP: "192.168.1.188",
DevicePort: "554",
DeviceType: "1101",
ChannelNum: "0",
PassWord: "123",
StreamServerIP: "172.16.96.165",
StreamServerPort: "10088",
UserName: "admin",
ChannelId: "47ce58b1362c43c898269d299d203c23-0000",
name: "172.16.67.250",
code: "47ce58b1362c43c898269d299d203c23-0000",
ptzLock: "",
},
channelInfo2: {
ChannelNum: "0",
DeviceIP: "192.168.1.202",
DevicePort: "554",
DeviceType: "1101",
PassWord: "123",
StreamServerIP: "172.16.96.165",
StreamServerPort: "10088",
UserName: "admin",
ChannelId: "47ce58b1362c43c898269d299d203c23-0000",
name: "172.16.67.250",
code: "47ce58b1362c43c898269d299d203c23-0000",
ptzLock: "",
},
vCount: 0,
panLoading: false,
panShow: null, //云台锁定标识
treeList: [],//通道树
};
},
methods: {
startCount(n) {
this.vCount = n;
},
// 云台锁定
toPanLock(n,callback) {
this.panLoading = true;
this.panShow = n;
this.panLoading = false;
callback({code:true})
},
startVideo(num) {
this.$refs.VideoPannel.openVideo(this["channelInfo" + num]);
},
//帧标记查询
toSelectMark(info,callback){
callback(info)
},
//删除标记
toDelSign(obj,callback){
callback({code:true})
},
//发送到电视墙
toSendTVwall(){
console.log('发送到电视墙')
},
//云台控制
toYunControl(id,callback){
callback(true)
},
//云台操作
handlePTZControlVideo(ptzCmd){
console.log(ptzCmd)
},
},
};
</script>
<style lang="less">
.btn {
width: 200px;
}
.videoPannel {
flex: 1;
}
</style>
3.VideoPlayerBackPannel
VideoPlayerBackPannel用于回放多个视频