# vue-h5player-components

> vue版bonc视频组件

Latest version **1.0.3** (published 2021-03-12) · ISC license · 0 weekly downloads

## Install

```sh
npm install vue-h5player-components
pnpm add vue-h5player-components
yarn add vue-h5player-components
bun add vue-h5player-components
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2021-03-12 |
| First published | 2021-03-03 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 293 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | xdluo |

## Links

- npm: https://www.npmjs.com/package/vue-h5player-components
- npm.io page: https://npm.io/package/vue-h5player-components

## Dependencies (6)

- [less](https://npm.io/package/less.md) ^2.7.3
- [jszip](https://npm.io/package/jszip.md) ^3.6.0
- [events](https://npm.io/package/events.md) ^3.2.0
- [element-ui](https://npm.io/package/element-ui.md) ^2.15.0
- [file-saver](https://npm.io/package/file-saver.md) ^2.0.5
- [bonc-htmlplayer](https://npm.io/package/bonc-htmlplayer.md) ^1.0.16

## Recent versions

- 1.0.3 (latest) — 2021-03-12
- 1.0.2 — 2021-03-05
- 1.0.1 — 2021-03-03
- 1.0.0 — 2021-03-03

## README

## 描述
本组件库包含3个基于bonc-htmlplayer内核进行封装的vue组件。
## 安装
```
# 安装
npm i vue-h5player-components --save
```
## 1.VideoPlayer
VideoPlayer用于播放单个实时视频，具有清除、全屏、截图、云台控制、放大缩小等功能

### 代码示例：
```vue
<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用于实时播放多个视频

### 示例代码
```vue
<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)

---
_Source: https://npm.io/package/vue-h5player-components · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._