描述

本组件库包含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用于回放多个视频

recordSearch(startTime,endTime)