Eve-video NPM | npm.io

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

事件名称	说明	回调参数
handleToolsCallBack	选中工具栏时触发	当前选中的工具栏对应值
videoTagCallBack	选中监控分屏的窗口时触发	当前选中的窗口对应值
controlCallBack	点击云台控制方向键时触发	当前选中的方向对应值

Methods

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

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

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

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

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

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

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播放方式优化
- 视频流播放状态优化

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
```