---
title: VideoSliderModal - 视频弹窗组件
nav:
  title: 基础组件
  path: /components
group:
  path: /
---

# VmsVideo 视频弹窗组件

## 组件使用

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

## API

### 主要参数说明

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| ModalInfo | api 参考 Antd Modal 组件 https://ant.design/components/modal-cn#api | object | {width:1000,title:'视频预览',footer:null} |
| VideoInfo | 传参格式[VideoParams,VideoParams,...],VideoParams 可参考如下详细说明 | array | - |
| JessibucaObj | 传参格式可参考如下详细说明 | object | - |

### VideoParam 参数和 JessibucaObj 参数详细说明

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| VideoParams | 每一个视频的信息,更多 api 可参考视频组件 VmsVideo 的 VideoParam | object | { } |
|  | 【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' |
| JessibucaObj | 更多 api 可参考视频组件 VmsVideo 的 JessibucaObj | object | { } |
|  | 【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 |

### 补充

更多参数，方法，事件，可查看 demo 中的传参
