控制台集成可以提供播放视频、查看截图、人工审核、推荐视频等功能,让您更直观地查看和管理视频资源。通过阅读本文,您可以了解到趣视频控制台集成操作方法。
前提条件
- 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)。
- 视频不同清晰度的播放(同时可查看视频描述)。
- 审核状态、转码状态的查看。
- 操作主要有预热、取消推荐、窄带高清转码。
操作步骤
- 下载趣视频Demo源码。
- 控制台集成需要先下载趣视频AppSever及管理控制台Demo源码。具体信息,请参见趣视频AppSever及管理控制台Demo下载。
- 解压源码包。
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
下进行。
- 配置及编译。
- 修改
./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/'
: '/',
}
- 环境安装好之后。打开命令行工具,切换到
video-admin
目录下,安装项目依赖,执行以下命令:
- 依赖安装完毕并修改配置之后,执行以下命令:
npm run serve
说明
- 执行该命令后,会在本地开启一个服务。在浏览器中打开默认地址http://localhost:8080,即可在本地使用控制台,对上传的视频进行审核、推荐等操作。如