xd-video-vue2 v0.2.15

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 等
}

操作事件

eventFunction(eventName, args)
//eventName
//1. setSrc  设置播放地址 参数一个url
//2. switchWindow  切换窗口数量  参数 num
//3. switchScreen 切换全屏

监听事件

/**
 * 1. windowClick 窗口被点击 有两个参数  index  data
 * 2. numChange 窗口数量发生变化  num
 * 3. playStateChange 播放状态 true.正在播放  false.播放结束/播放错误..
 *    如果是多个窗口  是以所有窗口的状态一致  才会变化
 */