eve-video-modbus

v0.0.1

Published

a month ago

``` yarn install ```

Downloads

0High
0Medium
0Low

withtears

H5播放组件

本系统是基于VUE的V2.5.11版本开发的H5监控播放组件，目前支持通过CDN及npm进行快速集成使用

注意！！！

更新版本后(npm更新或直接替换eve-video.js) 请将更新后的新文件：EasyPlayer-lib.min.js替换原本的文件。
项目部署后需要在nginx的html文件下创建 "/eve-video/js/" 并将EasyPlayer.wasm文件放在js文件下，本地放置在public路径下

安装及快速上手

CDN

1.相关依赖引入（该组件需要依赖VUE环境）

    <script src="./js/vue.js"></script>
    <script src="./js/eve-video.js"></script>

2.组件基本使用

<html>
<head>
  <meta charset="utf-8">
  <title>eevvideo</title>
</head>
<body>

<div id="app">
  <eve-video
    ref="video"
  ></eve-video>
</div>
<script src="./js/vue.js"></script>
<script src="./js/eve-video.js"></script>
<script>
  let video = new Vue({
    el: '#app',
    mounted() {
      // 初始化组件
      let option = {
        monitorServiceUri: 'http://127.0.0.1:8000', // 监控服务地址
        winSize: 4,
        toolBar: '1',
        width: '500px',
        height: '500px'
      }
      this.$refs.video.setOption(option)
    }
  })

  function playVideo() {
    // 初始化组件
    var monitParams = {
      code: "123456789", // 非必填
      channel: "1404a59563fc5dc3c7c7fbb1b0bea350",
      username: "25598763",
      pwd: "evecom@local"
    }
    // 调用播放方法
    video.$refs.video.playVideoWithWin(2,monitParams)
  }

</script>
</body>

<script>

</script>
</html>

NPM安装

1.下载依赖
- npm i video-web
2.main.js配置组件信息
- import eveVideo from 'video-web'
- Vue use(eveVideo)
3.组件基本使用

<template>
      <!-- 中间播放 -->
  <eve-video
    ref="hlsVideoPlayer"
  ></eve-video>
</template>
<script>
export default {
  mounted() {
    // 初始化组件
    let option = {
      monitorServiceUri: 'http://127.0.0.1:8000', // 监控服务地址
      winSize: 4,
      toolBar: '1',
      width: '500px',
      height: '500px'
    }
    this.$refs.video.setOption(option)
  },
  methods: {
    playVideo() {
      // 初始化组件
      var monitParams = {
        code: "123456789", // 非必填
        channel: "1404a59563fc5dc3c7c7fbb1b0bea350",
        username: "25598763",
        pwd: "evecom@local"
      }
      // 调用播放方法
      this.$refs.video.playVideoWithWin(2,monitParams)
    }
  }
}
</script>
}

组件属性

Attributes

| 参数 | 说明 | 类型 | 默认值 | |:------:|:----------:|:---------------:|:------:| | toolBar | 是否显示监控的工具栏 | string | "1" | | winSize | 监控的分屏数量 | int | 1 | | width | 监控的宽度 | string | "100%" | | height | 监控高度 | string | "100%" | | monitorServiceUri | 监控服务地址 | string | "" | | monitorParams | 监控播放参数 | object / string | "" |

monitorParams参数说明

| 参数 | 说明 | 类型 | 是否必填 | |:-------------:|:-----:|:---------------:|:----:| | code | 监控编号 | string | 否 | | channel | 监控通道号 | String | 是 | | username | 监控用户名 | string | 否 | | pwd | 监控密码 | string | 否 |

Events

Methods

setOption(option)
- 方法说明：监控插件初始化
- 参数说明：
  1. option(object):监控初始化参数数据

playVideo(monitorParams)
- 方法说明：播放监控
- 参数说明：
  1. monitorParams(object)：播放参数

playVideoWithWin(win,monitorParams)
- 方法说明：播放监控
- 参数说明：
  1. win(int): 要播放的窗口，起始窗口0
  2. monitorParams(object)：播放参数

setToolBar(state)
- 方法说明：设置是否使用工具栏
- 参数说明：
  1. state(string): 1-启用，2-关闭
setWinSize(winSize)
- 方法说明：设置监控组件窗口数
- 参数说明：
  1. win(int): 窗口数，支持窗口数量1、4、9、16
setMonitorServiceUri(uri)
- 方法说明：设置流媒体服务地址，非浏览器可直接播放的视频需要通过流媒体服务转发推流才能进行播放
- 参数说明：
  1. uri(string): 流媒体服务地址

版本

V1.0.0.20230808

新增功能点：
- 可以满足监控的基本使用
待优化
- 动画加载样式更改
- 设置视频加载超时
- 优化flv视频格式加载

V1.2.20240130

新增功能点：
- 动画加载优化
- 全局样式修改
- 加载失败提示优化
- 鼠标右击选项
- 双击放大缩小窗口
- 截图接口返回base64支持

V1.2.20240313

新增功能点：
- 切屏后重新加载问题修复
- 播放状态提示优化

V1.2.20240319

新增功能点：
- 绘制画布、取消画布功能
- H265 HLS流底层优化
- 云台功能界面显示优化

V1.2.20240320

新增功能点：
- 修复H265截图问题
- 新增流播放状态回调

V1.2.20240321

新增功能点：
- 优化播放视频后选中框自动下移
- 优化直播状态回调事件
- H265绘制区域优化

V1.2.20240326

新增功能点：
- 修复已知问题

V1.2.20240326

更新内容：
- 调整本地265解码文件以及服务器文件读取地址

V1.2.20240326

更新内容：
- 优化视频流关闭问题

V1.2.20240426

更新内容：
- 新增视频分屏拖拽
- 新增视频分屏重复配置选项

V1.3.20240430

更新内容:
- 优化H5播放器播放底层使用切换

V1.3.20240507

更新内容:
- websocet播放方式优化
- 视频流播放状态优化

V1.3.20240522

更新内容:
- 云台控制接口对接使用

V1.3.20240530

更新内容:
- 支持云台设置预置位信息(需设备支持，监控账号密码)
- 支持监控录像下载至本地(实时流)

V1.3.20240703

更新内容:
- 支持分屏全屏查看
- 修复一分屏切换视频源播放窗口错乱问题
- 新增测试流接口

V1.3.20240703

更新内容:
- 底层播放规则调整

V1.3.202407016

更新内容:
- mp4视频播放调整
- 前端样式优化

FAQ

本地构建

js
- 本地生成js文件
```
npm run build
```
npm
- 修改本地配置文件
  1. 命名生成npm包名：在根目录package.json中，修改"name"对应的键值即为发布的包名
```
name: video-web
```
  2. 修改版本号：在根目录package.json中，修改"version"对应的键值为发布的版本号
```
version: 0.9.0
```
- 上传至npm官网
  1. 注册npm官网上的账号
  2. 在控制台输入npm login 输入账号密码和邮箱进行登录
```
npm login
```
  3. 在控制台输入npm publish 即可发布
```
npm publish
```

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

H5播放组件

注意！！！

安装及快速上手

CDN

NPM安装

组件属性

Attributes

Events

Methods

版本

V1.0.0.20230808

V1.2.20240130

V1.2.20240313

V1.2.20240319

V1.2.20240320

V1.2.20240321

V1.2.20240326

V1.2.20240326

V1.2.20240326

V1.2.20240426

V1.3.20240430

V1.3.20240507

V1.3.20240522

V1.3.20240530

V1.3.20240703

V1.3.20240703

V1.3.202407016

FAQ

本地构建