Video Split Screen

Vue 3 视频分屏组件，支持多种布局、拖拽排序、响应式设计。内置完整样式，无需额外配置即可使用。

✨ 特性

• 🎯 多种布局：支持1/2/3/4/6/7/8/9/10/13/16分屏布局
• 🎨 内置样式：完整样式内置，无需额外引入CSS文件
• 🖱️ 拖拽排序：支持视频块拖拽重新排序
• 📱 响应式设计：自适应不同屏幕尺寸
• 🎭 自定义占位符：支持自定义占位符文本和样式
• 🔧 TypeScript支持：完整的类型定义
• 📦 轻量级：压缩后仅 ~25KB

📦 安装

npm install video-split-screen
# 或
yarn add video-split-screen
# 或
pnpm add video-split-screen

🚀 快速开始

全局注册

import { createApp } from 'vue'
import App from './App.vue'
import VideoSplitScreen from 'video-split-screen'

const app = createApp(App)
app.use(VideoSplitScreen)
app.mount('#app')

按需导入

import { VideoGridLayout } from 'video-split-screen'

基础用法

<template>
  <VideoGridLayout
    :videos="videoList"
    layout="4"
    @videosChange="handleVideosChange"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { VideoGridLayout } from 'video-split-screen'

const videoList = ref([
  { id: 1, title: 'Camera 1', url: 'rtmp://...' },
  { id: 2, title: 'Camera 2', url: 'rtmp://...' },
  { id: 3, title: 'Camera 3', url: 'rtmp://...' },
  { id: 4, title: 'Camera 4', url: 'rtmp://...' }
])

const handleVideosChange = (videos) => {
  videoList.value = videos
}
</script>

📋 API 参考

VideoGridLayout Props

| 参数 | 类型 | 默认值 | 必填 | 说明 | |------|------|--------|------|------| | videos | VideoItem[] | - | ✅ | 视频数据数组 | | layout | LayoutType | '1' | ❌ | 布局类型，可选值：'1'\|'2'\|'3'\|'4'\|'6'\|'7'\|'8'\|'9'\|'10'\|'13'\|'16' | | availableLayouts | LayoutType[] | - | ❌ | 可显示的布局按钮列表，不传则显示全部 | | showToolbar | boolean | true | ❌ | 是否显示布局切换工具栏 | | width | string | '100%' | ❌ | 组件宽度，支持任意CSS长度值（如'100%', '800px'） | | height | string | '100%' | ❌ | 组件高度，支持任意CSS长度值（如'70vh', '600px'） | | placeholderText | string \| ((index: number) => string) | - | ❌ | 全局占位符文本，或返回文本的函数 | | placeholders | Array<string \| number> | - | ❌ | 按索引自定义占位符，可单独修改某些格子的显示文本 |

VideoGridLayout Events

| 事件名 | 参数 | 说明 | |--------|------|------| | videosChange | (videos: VideoItem[]) => void | 视频列表发生变化时触发（拖拽排序后） | | layoutChange | (layout: LayoutType) => void | 布局切换时触发 |

VideoItem 类型定义

interface VideoItem {
  id: string | number        // 视频唯一标识
  title?: string            // 视频标题
  url?: string              // 视频URL
  [key: string]: any        // 其他自定义属性
}

🎨 占位符配置

组件支持灵活的占位符配置，优先级如下：

1. placeholders[index] - 最高优先级，精确控制某个位置的占位符
2. placeholderText - 中等优先级，支持字符串或函数
3. 默认编号 - 最低优先级，显示位置索引+1

示例

<!-- 自定义占位符文本 -->
<VideoGridLayout
  :videos="videos"
  placeholderText="等待视频..."
/>

<!-- 动态占位符 -->
<VideoGridLayout
  :videos="videos"
  :placeholderText="(index) => `摄像头 ${index + 1}`"
/>

<!-- 精确控制 -->
<VideoGridLayout
  :videos="videos"
  :placeholders="['主摄像头', '副摄像头', '', '备份']"
  placeholderText="空闲"
/>

🎯 支持的布局类型

| 布局 | 说明 | 视频数量 | |------|------|----------| | '1' | 单画面 | 1 | | '2' | 左右分屏 | 2 | | '3' | 上下分屏 | 2 | | '4' | 四分屏 | 4 | | '6' | 六分屏（2x3） | 6 | | '7' | 七分屏（1大3小） | 4 | | '8' | 八分屏（2x4） | 8 | | '9' | 九分屏（3x3） | 9 | | '10' | 十分屏（1大6小） | 7 | | '13' | 十三分屏（1大9小） | 10 | | '16' | 十六分屏（4x4） | 16 |

🔧 高级用法

自定义样式

虽然组件内置了完整样式，但你也可以通过CSS变量自定义外观：

.video-grid-layout {
  --primary-color: #your-color;
  --background-color: #your-bg;
}

自定义视频渲染

使用默认插槽自定义视频显示：

<VideoGridLayout :videos="videos">
  <template #video="{ video, index }">
    <video :src="video.url" controls />
  </template>
</VideoGridLayout>

📄 License

MIT License - 详见 LICENSE 文件

🤝 贡献

欢迎提交 Issue 和 Pull Request！

• 🐛 报告问题
• 💡 功能建议
• 🔧 代码贡献

📞 联系我们

如有问题或建议，请通过以下方式联系：

• 📧 Email: [email protected]
• 🐙 GitHub: laylwenl/videoSplitScreen