【郑州校区】学成在线-第13天-讲义-在线学习 HLS 四

4 搭建学习中心前端
学成网学习中心提供学生在线学习的各各模块，上一章节测试的点播学习功能也属于学习中心的一部分，本章节将实现学习中心点播学习的前端部分。之所以先实现前端部分，主要是因为要将video.js+vue.js集成，一部分精力还是要放在技术研究。
4.1 界面原型
先看一下界面原型，如下图，最终的目标是在此页面使用video.js播放视频。


4.2 创建学习中心工程
学习中心的用户是学生，为了便于系统维护和扩展，单独创建学习中心工程：
1、从资料目录拷贝xc-ui-pc-leanring.zip 并解压到xc-ui-pc-leanring目录。
2、使用webstorm创建打开xc-ui-pc-leanring目录
3、进入xc-ui-pc-leanring目录，执行cnpm install，将根据package.json的依赖配置远程下载依赖的js包。
创建完成，xc-ui-pc-leanring工程如下：


4.2.1 配置域名
学习中心的二级域名为ucenter.xuecheng.com，我们在nginx中配置ucenter虚拟主机。

[AppleScript] 纯文本查看 复制代码

 #学成网用户中心
server {
listen 80;
server_name ucenter.xuecheng.com;
#个人中心
location / {
proxy_pass http://ucenter_server_pool;
}
}
#前端ucenter
upstream ucenter_server_pool{
#server 127.0.0.1:7081 weight=10;
server 127.0.0.1:13000 weight=10;
}

4.2.2 访问
启动工程，看到下边的界面说明本工程创建完成：


4.3 调试视频播放页面
使用vue-video-player组件将video.js集成到vue.js中，本项目使用vue-video-player实现video.js播放。
组件地址：https://github.com/surmon-china/vue-video-player
上面的 xc-ui-pc-learning工程已经添加vue-video-player组件，我们在vue页面直接使用即可。
前边我们已经测试通过 video.js，下面我们直接在vue页面中使用vue-video-player完成视频播放。
导入learning_video.vue页面到course 模块下。
配置路由：

[AppleScript] 纯文本查看 复制代码

import learning_video from '@/module/course/page/learning_video.vue';[/size][/font]
[font=微软雅黑][size=3]{
path: '/learning/:courseId/:chapter',
component: learning_video,
name: '录播视频学习',
hidden: false,
iconCls: 'el‐icon‐document'
}

预览效果：
请求：http://ucenter.xuecheng.com/#/learning/1/2
第一个参数：courseId，课程id，这里是测试页面效果随便输入一个ID即可，这里输入1
第二个参数：chapter，课程计划id，这里是测试页面效果随便输入一个ID即可，这里输入2

【郑州校区】学成在线-第13天-讲义-在线学习 HLS 四

4 搭建学习中心前端
学成网学习中心提供学生在线学习的各各模块，上一章节测试的点播学习功能也属于学习中心的一部分，本章节将实现学习中心点播学习的前端部分。之所以先实现前端部分，主要是因为要将video.js+vue.js集成，一部分精力还是要放在技术研究。
4.1 界面原型
先看一下界面原型，如下图，最终的目标是在此页面使用video.js播放视频。


4.2 创建学习中心工程
学习中心的用户是学生，为了便于系统维护和扩展，单独创建学习中心工程：
1、从资料目录拷贝xc-ui-pc-leanring.zip 并解压到xc-ui-pc-leanring目录。
2、使用webstorm创建打开xc-ui-pc-leanring目录
3、进入xc-ui-pc-leanring目录，执行cnpm install，将根据package.json的依赖配置远程下载依赖的js包。
创建完成，xc-ui-pc-leanring工程如下：


4.2.1 配置域名
学习中心的二级域名为ucenter.xuecheng.com，我们在nginx中配置ucenter虚拟主机。

[AppleScript] 纯文本查看 复制代码

 #学成网用户中心
server {
listen 80;
server_name ucenter.xuecheng.com;
#个人中心
location / {
proxy_pass http://ucenter_server_pool;
}
}
#前端ucenter
upstream ucenter_server_pool{
#server 127.0.0.1:7081 weight=10;
server 127.0.0.1:13000 weight=10;
}

4.2.2 访问
启动工程，看到下边的界面说明本工程创建完成：


4.3 调试视频播放页面
使用vue-video-player组件将video.js集成到vue.js中，本项目使用vue-video-player实现video.js播放。
组件地址：https://github.com/surmon-china/vue-video-player
上面的 xc-ui-pc-learning工程已经添加vue-video-player组件，我们在vue页面直接使用即可。
前边我们已经测试通过 video.js，下面我们直接在vue页面中使用vue-video-player完成视频播放。
导入learning_video.vue页面到course 模块下。
配置路由：

[AppleScript] 纯文本查看 复制代码

import learning_video from '@/module/course/page/learning_video.vue';[/size][/font]
[font=微软雅黑][size=3]{
path: '/learning/:courseId/:chapter',
component: learning_video,
name: '录播视频学习',
hidden: false,
iconCls: 'el‐icon‐document'
}

预览效果：
请求：http://ucenter.xuecheng.com/#/learning/1/2
第一个参数：courseId，课程id，这里是测试页面效果随便输入一个ID即可，这里输入1
第二个参数：chapter，课程计划id，这里是测试页面效果随便输入一个ID即可，这里输入2