3.5.3 视频播放页面
1、如果传入的课程计划id为0则取出第一个课程计划id 在created钩子方法中完成
[AppleScript] 纯文本查看 复制代码 created(){
//当前请求的url
this.url = window.location
//课程id
this.courseId = this.$route.params.courseId
//课程计划id
this.chapter = this.$route.params.chapter
//查询课程信息
systemApi.course_view(this.courseId).then((view_course)=>{
if(!view_course || !view_course[this.courseId]){
this.$message.error("获取课程信息失败，请重新进入此页面！")
return ;
}
let courseInfo = view_course[this.courseId]
console.log(courseInfo)
this.coursename = courseInfo.name
if(courseInfo.teachplan){
//将从服务端获取的课程计划json转成对象
let teachplan = JSON.parse(courseInfo.teachplan);
//将课程计划赋值给数据模型
this.teachplanList = teachplan.children;
console.log(this.teachplanList)
if(!this.chapter || this.chapter == '0'){
//取出第一个教学计划
this.chapter = this.getFirstTeachplan()
console.log(this.chapter)
//开始学习
this.study(this.chapter)
}
}
})
},
取出第一个章节id：
[AppleScript] 纯文本查看 复制代码 //取出第一个章节
getFirstTeachplan(){
for(var i=0;i<this.teachplanList.length;i++){
let firstTeachplan = this.teachplanList[i];
if(firstTeachplan.children && firstTeachplan.children.length>0){
let secondTeachplan = firstTeachplan.children[0];
return secondTeachplan.id;
}
}
return ;
},
开始学习：
[AppleScript] 纯文本查看 复制代码 //开始学习
study(chapter){
// 获取播放地址
courseApi.get_media(this.courseId,chapter).then((res)=>{
if(res.success){
let fileUrl = sysConfig.videoUrl + res.fileUrl
//播放视频
this.playvideo(fileUrl)
}else if(res.message){
this.$message.error(res.message)
}else{
this.$message.error("播放视频失败，请刷新页面重试")
}
}).catch(res=>{
this.$message.error("播放视频失败，请刷新页面重试")
});
},
2、点击右侧课程章节切换播放 在原有代码基础上添加click事件，点击调用开始学习方法（study）。
[AppleScript] 纯文本查看 复制代码 <li v‐if="teachplan_first.children!=null" v‐for="(teachplan_second, index) in teachplan_first.children"><i class="glyphicon glyphicon‐check"></i>
<a :href="url" @click="study(teachplan_second.id)">
{{teachplan_second.pname}} </a> </li>
3.5.4 测试
访问在线学习页面：http://ucenter.xuecheng.com/#/learning/课程id/课程计划id
通过url传入两个参数：课程id和课程计划id 如果没有课程计划则传入0
测试项目如下：
1、传入正确的课程id、课程计划id，自动播放本章节的视频
2、传入正确的课程id、课程计划id传入0，自动播放第一个视频
3、传入错误的课程id或课程计划id，提示错误信息。
4、通过右侧章节目录切换章节及播放视频。
| 
收藏
淘帖
踩
