--- 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 中的传参