vue3-viddeo-grop-component

vue3-video-group-component

安装

npm install vue3-video-group-component

启动

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

vue3-video-group-component 简介

一个基于（vue3） element-plus 与 LivePlayer H5 播放器二次封装的视频组组件

属性

cameraList

cameraList 摄像头数据 Array 默认值：[] 数组格式参考 element-plus 树形控件数据格式，目前只支持默认格式不支持自配字段

videoclass

videoclass 栅格样式 String 默认值："padding-bottom: 46%;position: relative; margin: 0px auto;"

videoTitle

videoTitle 左侧树上方标题 String 默认值："树标题"

isRadio

isRadio 是否展示分屏 Boolean 默认值：true

videoTitle

videoTitle 视频右上角显示的标题 String 默认值：""

autoplay

autoplay 自动播放 Boolean 默认值：true

controls

controls 显示播放器控制栏 Boolean 默认值：true

loop

loop 是否循环播放 Boolean 默认值：true

live

live 视频右上角显示的标题 Boolean 默认值：true

fluent

fluent 流畅模式 默认值：true

stretch

stretch 是否拉伸 默认值：true

方法

onStateFilterate

@onStateFilterate 状态值变更方法 回调参数：cameraStateList 值：['online','offline'],[]

getCameraNode

@getCameraNode 树节点点击回调 回调参数：data 值：当前点击节点的值

setVideoProperties

setVideoProperties 设置选中视频属性并播放 参数：data 属性数据
_ @param {Boolean} data.PTZStatus 是否为云台设备
_ @param {String} data.URL 播放地址

controlPtz

controlPtz 云台按钮点击事件回调函数
@param {*} 回调参数：type 类型：up，down，left，right

注意

vue3-video-group-component 组件基于 element-plus 与 LivePlayer H5 播放器进行的二次封装，在使用前请确保项目中已安装 element-plus 以及 LivePlayer H5 极其相关配置

[element-plus]https://element-plus.org/zh-CN/ [LivePlayerH5]https://www.liveqing.com/docs/manuals/LivePlayer.html#%E5%AE%89%E8%A3%85