---
title: VmsVideo - 视频组件
nav:
  title: 基础组件
  path: /components
group:
  path: /
---

# VmsVideo 视频组件

## 组件使用

**需将组件中 JessibucaVideo 文件夹,拷贝至环境根目录 public 中**<br/> **且需在子应用或者基座上的入口文件 index.html 或者 index.ejs 中,用 script 标签将 jessibuca.js 引入**<br/> 如:<br/> `<script type="text/javascript" src="/civ_energy/JessibucaVideo/jessibuca.js"></script>`<br/> <br/> **在定义 decoder.js 文件路径时**<br/> 如:<br/> `let _url = '/civ_energy/JessibucaVideo/decoder.js'`<br/> <br/>

**需安装的依赖项: ezuikit-js axios (1.npm i ezuikit-js 2.npm i axios)**

<code src="./demos/dmeo1.tsx">

## 参数说明

| JessibucaObj 常用参数(对萤石 EZOPEN 协议不生效) | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| **decoder** | 是文件"/JessibucaVideo/decoder.js"的路径 | string | --- |
| hiddenAutoPause | 是否开启当页面的'visibilityState'变为'hidden'的时候,自动暂停播放。 | boolean | false |
| hasAudio | 是否有音频,如果设置 false,则不对音频数据解码,提升性能 | boolean | true |
| isFlv | 当为 true 的时候:ws 协议不检验是否以.flv 为依据,进行协议解析。 | boolean | false |
| isNotMute | 是否开启声音,默认是关闭声音播放的。 | boolean | false |
| loadingText | 加载过程中文案 | string | "视频加载中" |
| controlAutoHide | 底部控制台是否自动隐藏 | boolean | false |
| recordType | 默认录制的视频格式 | string | mp4 |
| operateBtns | 配置操作按钮,以下为 operateBtns 详细属性 | object |  |
|  | fullscreen 是否显示全屏按钮 | boolean | true |
|  | screenshot 是否显示截图按钮 | boolean | true |
|  | play 是否显示播放暂停按钮 | boolean | true |
|  | audio 是否显示声音按钮 | boolean | true |
|  | record 是否显示录制按钮 | boolean | true |
| VideoParam 参数 | --- | --- | --- |
| fullUrl | 完整 url,接入 flv 或者三方的链接 | string | "" |
| username | 账号 | string | "6c44c8e92d1c4d75a9818756025df550" |
| password | 密码 | string | "78b7dc88f9f4bf19c2b1aabfdd995244" |
| address | 地址 | string | "123638446" |
| protocol | 协议类型 | string | "萤石 EZOPEN" |
| gateway | 是否走网关 | boolean | false |
| pandavmsHost | pandavms 后端主机地址 eg | string | ws://172.16.19.19:8080/ |
| useFullUrl | 是否为完整 url,是,则取 fullUrl,否,则会用 pandavmsHost 和 id 去拼接 | boolean | false |
| id | 摄像头唯一标识,一串 GUID | string | "" |
| name | 摄像头名称 | string | "" |
| dataRate | 码率,Main 为主码流,Sub 为辅码流,与消耗网络有关,主码流消耗最高,**由于拼接方式不定,改为是字符串传入** | string | 'Sub' |

## 写在最后

更多参数,方法,事件,可查看 demo1 中的调用方法,以及参考 Jessibuca 在线文档 ,https://jessibuca.com/api.html