自动分屏组件

本组件可以实现1-6路视频自动分屏,并可以切换分屏数量.

组件使用的视频播放插件基于 Jessibuca 实现

组件安装

拷贝src/components/split-screen/目录至你vue项目中并在项目中引用该组件即可组,如下所示:

  1. <template>
  2.     <div style="height: 100%">
  3.         <splitScreen :videoData="videoData" />
  4.     </div>
  5. </template>
  1. <script>
  2.     import splitScreen from './components/split-screen'
  3.     export default {
  4.         components: {
  5.             splitScreen,
  6.         },
  7.         data() {
  8.             return {
  9.                 videoData: [
  10.                     {
  11.                         name: '维护通道J01',
  12.                         videoUrl: '...',
  13.                     }
  14.                     null,
  15.                 ],
  16.             }
  17.         },
  18.     }
  19. </script>

组件参数

videoData

  • 类型：Array
  • 用法：视频流名称及地址

传入组件视频流数据, 每路视频使用一个对象包裹, 键名请勿修改否则无法接受到参数

  1. {
  2.     name: '维护通道J01', // 视频流名称
  3.     videoUrl: '...', // 视频流地址
  4. }

数组长度决定分屏数量,当数组长度为1时, 分屏数量为1 当长度大于1小于5时,分屏数量为4, 大于4时分屏为6, 超出6个分屏数据不再显示
分屏中如果没有视频数据请使用null占位

  1. // 显示1分屏
  2. [{ name: '维护通道J01', videoUrl: '...', }]
  5. // 显示4分屏
  6. [{ name: '维护通道J01', videoUrl: '...', }, null , null, null]