xd-video-vue2
v0.2.15
Published
- 海康插件 - 大华插件 - 西瓜播放器 - 西瓜播放器hls.js - 西瓜播放器flv.js - easyPlayer
Downloads
23
Readme
xd-video
支持
- 海康插件
- 大华插件
- 西瓜播放器
- 西瓜播放器hls.js
- 西瓜播放器flv.js
- easyPlayer
使用方式
/**
包默认导出的是全局导入 install模式
提供按需导入 xdVideo dhVideo hkVideo defaultXdVideo
正常情况下直接导入xdVideo 就是导入所有的 看自己需要 提供这个方式只是避免全局导入而已
项目采用了webpack5 并且加用了模块联邦有需要自己拉代码使用
*/
// improt xdVideo1,{xdVideo, dhVideo, hkVideo, defaultXdVideo} from 'xd-video-vue2'
属性
/**
* componentName 指定播放器 海康 hkVideo 大华 dhVideo 默认 defaultXdVideo
*/
/**
* autoUrl 自动获取地址
* @type {Boolean}
* @default false
* @description 自动获取地址 自动获取hk或者dh的m3u8地址
* 当autoUrl 设置为true的时候 option.url 会变成 hk://xx dh://xxx hk-m3u8://xxx dh-m3u8:// webrtc://xxx
* hk://xxx@ip=xxx&port=xxx&appKey=xxx&appSecret=xxx 海康还可以这样写 就不用传了哦
*/
// 自定义获取m3u8地址的方法 不定义这个方法的时候 会使用自带的方法
window.request.videoRequest = {
hk: (id) => Promise.resolve(''),
dh: (id, isM3u8) => Promise.resolve('')
}
/**
* options
*/
let options = {
url: '' | [''] | {url: '', videoType: '', customData: {}} | [{}],
num: 1,// 窗口数量 实际上会根据url 计算 所以这个可以不传
isLive: true, // 是否是直播
splitWindow: [1, 4, 6, 9, 16], // 窗口数量有哪些
isCustomControl: true, // 自定义控制条显示
}
// 海康
options = {
url: '' | [''],
appKey: "",
appSecret: "",
port: "",
ip: "",
layout: '1x1', // 可以不传 5x5以内的数量会自动计算
showToolbar: 1, // 是否显示工具控制栏
}
// 大华
options = {
url: '' | [''] | {path: '', redirect: ''} | [{}],
}
// 公用的
options = {
attrs: {} // 自定义属性 例如大华的 noTip dieldClass 等
}
| 属性 | 海康 | 大华 | 默认 | |-------|-----|-----|-----| | options | √ | √ | √ |
操作事件
eventFunction(eventName, args)
//eventName
//1. setSrc 设置播放地址 参数一个url
//2. switchWindow 切换窗口数量 参数 num
//3. switchScreen 切换全屏
| 事件eventFunction | 海康 | 大华 | 默认 | |-----------------|-----|-----|-----| | setSrc | √ | √ | √ | | switchWindow | | | √ | | switchScreen | | | √ |
监听事件
/**
* 1. windowClick 窗口被点击 有两个参数 index data
* 2. numChange 窗口数量发生变化 num
* 3. playStateChange 播放状态 true.正在播放 false.播放结束/播放错误..
* 如果是多个窗口 是以所有窗口的状态一致 才会变化
*/
| 监听事件 | 海康 | 大华 | 默认 | |--------------|-----|-----|-----| | windowClick | √ | √ | √ | | numChange | | | √ | | playStateChange | √ | | √ |