前端用flv+vue+elementui+uvp实现无插件视频分屏播放

在前端使用 FLV 格式（Flash Video，一种流媒体格式）结合 Vue.js、Element UI 和 UVP（Uniview Player）来实现实时无插件视频分屏播放，可以按照以下步骤进行：

1. **引入依赖**:
- Vue.js 是用于构建用户界面的 JavaScript 框架。
- Element UI 提供了一套响应式的组件库，方便构建界面。
- UVP 是一个基于 HTML5 的流媒体播放器，支持 FLV 视频。

2. **安装必要的库**:
- 使用 npm 或 yarn 安装对应的版本：

   npm install vue element-ui uvp-player

3. **创建项目结构**:
- 设计好项目的目录结构，包含 `src`、`public` 等基本文件夹，并配置 `main.js` 和 `index.html`。

4. **引入并注册 Vue**:

   import Vue from 'vue'
   new Vue({
     //...
   }).$mount('#app')

5. **初始化 Element UI**:
- 引入 Element UI 并注册其全局样式：

   <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

   import { ElPlayer } from 'element-ui/packages/player';
   Vue.component('el-player', ElPlayer);

6. **分屏播放组件**:
创建一个 Vue 组件，利用 UVP Player 实现分屏播放功能。示例代码如下：

   <template>
     <div>
       <el-row :gutter="10">
         <el-col :span="4">
           <el-player :src="flvUrl1"></el-player>
         </el-col>
         <!-- 添加其他分屏列，根据需要设置 span -->
         <el-col :span="4">
           <el-player :src="flvUrl2"></el-player>
         </el-col>
         <!-- ... -->
       </el-row>
     </div>
   </template>

   <script>
   export default {
     data() {
       return {
         flvUrl1: 'your_first_flv_url',
         flvUrl2: 'your_second_flv_url', // 更多URL
       };
     },
   };
   </script>

7. **运行应用**:
- 将视频 URL 替换为实际的 FLV 文件地址，然后在浏览器中运行 `index.html`。

8. **注意事项**:
- 由于 Flash 已经逐渐过时，未来可能会有兼容性问题。考虑使用现代技术如 HLS 或 DASH 来替代 FLV。