3.5.3 视频播放页面
1、如果传入的课程计划id为0则取出第一个课程计划id 在created钩子方法中完成

[mw_shl_code=applescript,true]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)      
        }       
     }       
})    
  }, 
[/mw_shl_code]
取出第一个章节id：

[mw_shl_code=applescript,true]//取出第一个章节   
    getFirstTeachplan(){      
   for(var i=0;i0){    
           let secondTeachplan = firstTeachplan.children[0];     
          return secondTeachplan.id;       
      }        
   }     
    return ;     
  },
[/mw_shl_code]

开始学习：


[mw_shl_code=applescript,true]//开始学习  
     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("播放视频失败，请刷新页面重试")   
      });    
   },
[/mw_shl_code]

2、点击右侧课程章节切换播放 在原有代码基础上添加click事件，点击调用开始学习方法（study）。


[mw_shl_code=applescript,true]
  •    
   
   {{teachplan_second.pname}}      
    •  
[/mw_shl_code]

    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、通过右侧章节目录切换章节及播放视频。