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

前提条件

  • 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,即可在本地使用控制台,对上传的视频进行审核、推荐等操作。如