控制台集成可以提供播放视频、查看截图、人工审核、推荐视频等功能，让您更直观地查看和管理视频资源。通过阅读本文，您可以了解到趣视频控制台集成操作方法。

前提条件

  • Web端环境集成需要您安装Node.js及其包管理器npm（用于编译sass的node-sass等依赖）。
    说明
    • Node.js版本过高或过低可能出现sass安装编译不通过的情况，建议您安装v11.15.0版本。
    • 建议您使用nvm管理Node环境。使用nvm可以快速安装切换node版本，在命令行使用node -v可以快速查看当前node版。
    • 建议您在本地安装Node.js环境，完成控制台配置及运行测试，再打包上传至ECS与服务端一同发布。
  • 在集成控制台源码前，您需要先完成服务端集成并保持服务端开启。服务端集成文档，请参见服务端集成。

趣视频管理控制台使用说明

控制台主要功能如下：

  • 登录或登录过期时，设置请求拦截器以重新登录。
  • 全部视频列表。
    • 根据视频ID、用户ID、用户名称、视频标题、审核状态、创建日期查询视频。
    • 查看视频信息（时长、视频大小、视频ID）。
    • 视频不同清晰度的播放（同时可查看视频描述）。
    • 显示截图。
    • 审核状态、转码状态的查看。
    • 操作主要有推荐、审核、转码、删除。
  • 推荐视频列表。
    • 根据视频ID、用户ID、用户名称、视频标题、创建日期查询视频。
    • 查看视频信息（时长、视频大小、视频ID）。
    • 视频不同清晰度的播放（同时可查看视频描述）。
    • 审核状态、转码状态的查看。
    • 操作主要有预热、取消推荐、窄带高清转码。

操作步骤

  1. 下载趣视频Demo源码。
    1. 控制台集成需要先下载趣视频AppSever及管理控制台Demo源码。具体信息，请参见趣视频AppSever及管理控制台Demo下载。
    2. 解压源码包。video-admin文件夹目录结构如下所示：
      ├── node_modules                  // node依赖安装目录，执行npm install之后依赖安装目录。
├── dist                          // 打包之后的文件目录。
├── public                        
│   ├── favicon.ico               
│   └── index.html                // 网页主入口，引用cdn等在线js和css。
├── src                           // 业务逻辑以及Vue组件目录。
│   ├── assets                    // 放置一些静态资源，包括css、images、fonts等。
│   │   ├── images
│   │   └── scss
│   ├── components                // vue组件目录。
│   │   ├── RecommendVideo.vue    // 推荐视频弹框组件。
│   │   └── VodPlayer.vue         // 播放器组件。
│   │   └── Tags.vue         // 视频标签。
│   │   └── VideoDot.vue         // 视频打点。
│   │   └── VideoSort.vue         // 设置剧集。
│   ├── mixin                     // vue mixin目录。
│   │   └── index.js
│   ├── router-short        //路由表配置。
│   │   └── index.js
│   ├── views                     // vue-router对应的渲染组件所在目录。
│   │   ├── list                  // 视频列表路由对应渲染组件。
│   │   │  └── index.vue
│   │   ├── login                 // 登录路由对应渲染组件。
│   │   │   └── index.vue
│   │   ├── recommend             // 推荐视频列表对应渲染组件。
│   │   │   └── index.vue
│   │   └── videos                // 主界面侧边栏头部渲染组件。
│   │       └── index.vue
│   ├── App.vue                   // 渲染主组件。
│   ├── main.js                   // 主入口文件。
│   └── router.js                 // vue-router路由配置文件。
├── .browserslistrc               // 浏览器兼容列表。
├── .gitignore
├── babel.config.js               // babel配置文件。
├── package-lock.json
├── package.json                  // 包说明文件，包括各种依赖、作者、描述等。
├── postcss.config.js             // postcss配置文件，加上css的厂商前缀。
├── README.md
├── README_zh.md
└── vue.config.js                 // vue配置文件。
      说明 趣视频控制台前端源码位于video-admin下，后续命令执行都需要在video-admin下进行。
  2. 配置及编译。
    1. 修改./video-admin/vue.config.js中的配置，将proxy设置成完成趣视频服务端集成的云服务器（ECS）的公网IP地址，并添加端口号8080。示例：http://<云服务器（ECS）公网IP地址>:8080，完整的配置如下：
      module.exports = {
// 设置前端开发时的代理
devServer: {
 proxy: 'http://*.*.*.*:8080',    // 替换成ECS服务器地址，后面不要加'/'。
},
productionSourceMap: false,
// 设置生产环境和开发环境时的静态资源路径。
publicPath: process.env.NODE_ENV === 'production'
 ? 'http://example.com/resource/'
 : '/',
}
    2. 环境安装好之后。打开命令行工具，切换到video-admin目录下，安装项目依赖，执行以下命令：
      npm install
    3. 依赖安装完毕并修改配置之后，执行以下命令：
      npm run serve
      说明
      • 执行该命令后，会在本地开启一个服务。在浏览器中打开默认地址http://localhost:8080，即可在本地使用控制台，对上传的视频进行审核、推荐等操作。如