vue-h5player-components

描述

本组件库包含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)