3.5.3 video playing page
1. If the passed in course plan id is 0, take out the first course plan id and complete it in the created hook method.

[mw_shl_code=applescript,true]created(){     
     //Current requested url   
     this.url = window.location     
   //Course id  
      this.courseId = this.$route.params.courseId  
      //Course plan id      
  this.chapter = this.$route.params.chapter 
       //Query course information    
    systemApi.course_view(this.courseId).then((view_course)=>{   
           if(!view_course || !view_course[this.courseId]){   
           this.$message.error("Failed to get course information, please re-enter this page!")     
         return ;      
      }       
           let courseInfo = view_course[this.courseId]       
     console.log(courseInfo)      
      this.coursename = courseInfo.name 
           if(courseInfo.teachplan){         
     //Turn the course plan json obtained from the server into an object       
       let teachplan = JSON.parse(courseInfo.teachplan);   
           //Assign course plan to data model       
      this.teachplanList = teachplan.children;      
        console.log(this.teachplanList)       
       if(!this.chapter || this.chapter == '0'){      
          //Take out the first teaching plan          
      this.chapter = this.getFirstTeachplan()       
         console.log(this.chapter)       
           //Start learning   
             this.study(this.chapter)      
        }       
     }       
})    
  }, 
[/mw_shl_code]
//Take out the first chapter id:

[mw_shl_code=applescript,true]//Take out the first chapter   
    getFirstTeachplan(){      
   for(var i=0;i<this.teachplanList.length;i++){     
        let firstTeachplan = this.teachplanList;     
        if(firstTeachplan.children && firstTeachplan.children.length>0){    
           let secondTeachplan = firstTeachplan.children[0];     
          return secondTeachplan.id;       
      }        
   }     
    return ;     
  },
[/mw_shl_code]

Start learning:

[mw_shl_code=applescript,true]//Start learning  
     study(chapter){      
   // Get playback address     
    courseApi.get_media(this.courseId,chapter).then((res)=>{     
      if(res.success){      
       let fileUrl = sysConfig.videoUrl + res.fileUrl   
          //Play video           
  this.playvideo(fileUrl)      
     }else if(res.message){   
          this.$message.error(res.message)  
         }else{      
       this.$message.error("Failed to play video. Please refresh the page and try again")   
        }       
  }).catch(res=>{        
   this.$message.error("Failed to play video. Please refresh the page and try again")   
      });    
   },
[/mw_shl_code]

2. Click the course chapter on the right to switch and play the click event added on the basis of the original code, and click to call the start learning method.

[mw_shl_code=applescript,true]<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> 
[/mw_shl_code]

3.5.4 test
Visit the eLearning page: http://ucenter.xuecheng.com/#/learning / course id / course plan id
Pass in two parameters through url: course id and course plan id. if there is no course plan, pass in 0.

The test items are as follows:
1. Pass in the correct course id and course plan id, and automatically play the video of this chapter
2. Pass in the correct course id and course plan id to 0, and automatically play the first video.
3. Pass in the wrong course id or course plan id to prompt the error message.

4. Switch chapters and play videos through the chapter directory on the right.