视频播放笔记记录时间的控制

src/views/study/coursenew.vue

@@ -25,7 +25,7 @@
               <course-image v-if="courseInfo.id != ''" :course="courseInfo"></course-image>
             </div>
             <div v-if="resType == 10" style="position: relative;">
-              <videoPlayer id="myVideoPlayer" v-if="resType == 10" :src="blobUrl" @onPlayerPlaying="onPlayerPlaying"
+              <videoPlayer ref="myVideoPlayer" id="myVideoPlayer"  :src="blobUrl" @onPlayerPlaying="onPlayerPlaying"
                 :initTime="contentData.lastStudyTime" :notePlay="notePlay" @onPlayerPlay="onPlayerPlay"
                 :isDrag="curriculumData.isDrag" @onFullscreen="onFullscreen" @onPlayerPause="onPlayerPause"
                 @onPlayerEnded="onPlayerEnded"></videoPlayer>
@@ -65,8 +65,7 @@
               <div class="con-audio">
                 <div class="con-audio-title">{{ contentData.contentName }}</div>
                 <div class="con-audio-player">
-                  <audioPlayer v-if="resType == 20" :url="blobUrl"
-                    :name="contentData.contentName" @onPlaying="audioPlaying" :isDrag="curriculumData.isDrag"
+                  <audioPlayer v-if="resType == 20" :url="blobUrl" :name="contentData.contentName" @onPlaying="audioPlaying" :isDrag="curriculumData.isDrag"
                     @onPlay="audioPlay" @onPause="audioPause" @onPlayEnd="audioEnd"></audioPlayer>
                 </div>
               </div>
@@ -124,7 +123,7 @@
                     <div style="margin: 10px 0px;font-weight: 700;">{{item.section.name}}</div>
                     <div class="units-info" :class="{'units-active':contentData.id == ele.id}" @click="showRes(ele,i,index)" v-for="(ele, i) in item.children" :key="i">
                       <img v-if="contentData.id == ele.id" :src="`${webBaseUrl}/images/playicon.png`" alt=""> {{i+1}}.
-                      {{ ele.contentName }}
+                      <span>{{ ele.contentName }}</span>
                     </div>
                   </div>
                 </div>
@@ -141,7 +140,7 @@
             </div>
             <!-- 我的笔记 -->
             <div class="mynote" v-show="tab == 2">
-              <my-note ref="mynote" :height="controlHeight" @change="Fn1" :data="courseInfo" @videoLocation="videoLocation" @onPlayVideo="onPlayVideo"
+              <my-note ref="mynote" :height="controlHeight" @change="noteChange" :data="courseInfo" @videoLocation="videoLocation" @onPlayVideo="onPlayVideo"
                 :score="courseInfo.score"></my-note>
             </div>
         </div>
@@ -383,7 +382,7 @@
       }
     },
     methods: {
-      Fn1(){
+      noteChange(){
 	    //视频点定位，直接到播放的视频位置
          this.timer = new Date().getTime()
 
@@ -455,17 +454,51 @@
       onPlayVideo(contentId,time){
         //这里需要根据contentId,是否切换到对应的内容的视频的时间
         //如果 contentId已经不存在，需要提示
-        this.playerBoxShow = false;
-        this.notePlay = null;
+        console.log(contentId,this.contentData.id,'两个内容id');
         let $this=this;
-        setTimeout(() => {
-          $this.notePlay = time;
-        }, 500)
+        if(this.contentData.id==contentId){
+           this.onPlayerPause()
+           //this.audioPause();
+           this.contentData.lastStudyTime=time;
+           //this.onPlayerPlay();
+           setTimeout(() => {
+             $this.$refs.myVideoPlayer.startPlay(time);
+           }, 10)
+           console.log('开始播放1');
+        }else{
+           //通过contentId
+           let toResContent=null;
+            this.contentList.forEach(c => {
+              if(c.id==contentId){
+                 c.lastStudyTime=time;
+                 toResContent=c;
+              }
+            });
+            if(toResContent!=null){
+              this.changePlayRes(toResContent);
+              //this.onPlayerPlay();
+              setTimeout(() => {
+                $this.$refs.myVideoPlayer.startPlay(time);
+              }, 10)
+              
+              console.log('开始播放2');
+            }else{
+              this.$message.error('资源已不存在或更换过，已无法定位');
+            }
+        }
+        this.playerBoxShow = false;
+        //this.changePlayRes(r);
+        // this.playerBoxShow = false;
+        // this.notePlay = null;
+        // let $this=this;
+        // setTimeout(() => {
+        //   $this.notePlay = time;
+        // }, 500)
       },
       //笔记组件触发,记录当前播放时间
       videoLocation() {
         //this.$store.dispatch("SetIntTimeNote", this.intTimeNote);
-        console.log(this.contentData.id+'='+this.intTimeNote,'设置视频播放时间')
+        //console.log(this.contentData.id+'='+this.intTimeNote,'设置视频播放时间')
         this.$refs.mynote.setVideoTime(this.contentData.id,this.intTimeNote);
       },
       coutab(n) {
@@ -490,51 +523,8 @@
       widthOpen(url) {
         window.open(url, '_blank');
       },
-      showRes(r, i, index) { //i:子节下标，index:章下标
-        if (i != undefined && index != undefined && r.status < 9) {
-          if (this.courseInfo.orderStudy) {
-            //判断上个是否学完
-            if (i == 0) {
-              if (index > 0) { //第一章 第一节
-                let preCatalog = this.catalogTree[index - 1];
-                let last = preCatalog.children[preCatalog.children.length - 1];
-                if (last.status != 9) {
-                  this.$message.warning('请按顺序学习！');
-                  return;
-                }
-              }
-            } else {
-              let pre = this.catalogTree[index].children[i - 1];
-              if (pre.status != 9) {
-                this.$message.warning('请按顺序学习！');
-                return;
-              }
-            }
-            //判断是否是第一个未学完的
-            let isAllow = false;
-            let has = this.catalogTree.some(treeNode => {
-              let hasNo = treeNode.children.some(child => {
-                if (child.status < 9) {
-                  if (child.id == r.id) {
-                    isAllow = true;
-                  }
-                  return true;
-                } else {
-                  return false;
-                }
-
-              });
-              return hasNo;
-            });
-            if (has) {
-              if (!isAllow) {
-                this.$message.warning('请按顺序学习！');
-                return;
-              }
-            }
-          }
-        }
-
+      //替换播放区域
+      changePlayRes(r){
         if(this.appendStudyOtherHandle!=null){
           window.clearTimeout(this.appendStudyOtherHandle);
         }
@@ -629,11 +619,53 @@
             $this.controlHeight=h-95;
             //console.log(h,$this.controlHeight,'$this.controlHeight');
         })
-
       },
-      // handleChange(val) {
-      //   console.log(val);
-      // },
+      showRes(r, i, index) { //i:子节下标，index:章下标
+        if (i != undefined && index != undefined && r.status < 9) {
+          if (this.courseInfo.orderStudy) {
+            //判断上个是否学完
+            if (i == 0) {
+              if (index > 0) { //第一章 第一节
+                let preCatalog = this.catalogTree[index - 1];
+                let last = preCatalog.children[preCatalog.children.length - 1];
+                if (last.status != 9) {
+                  this.$message.warning('请按顺序学习！');
+                  return;
+                }
+              }
+            } else {
+              let pre = this.catalogTree[index].children[i - 1];
+              if (pre.status != 9) {
+                this.$message.warning('请按顺序学习！');
+                return;
+              }
+            }
+            //判断是否是第一个未学完的
+            let isAllow = false;
+            let has = this.catalogTree.some(treeNode => {
+              let hasNo = treeNode.children.some(child => {
+                if (child.status < 9) {
+                  if (child.id == r.id) {
+                    isAllow = true;
+                  }
+                  return true;
+                } else {
+                  return false;
+                }
+
+              });
+              return hasNo;
+            });
+            if (has) {
+              if (!isAllow) {
+                this.$message.warning('请按顺序学习！');
+                return;
+              }
+            }
+          }
+        }
+        this.changePlayRes(r);
+      },
       loadScorePraiseAndTrample() {
         //加载是否请过分
         apiCourseGrade.has(this.courseId).then(rs => {
@@ -1900,6 +1932,10 @@
       line-height: 60px;
       font-size: 16px;
       cursor: pointer;
+      overflow: hidden;
+      white-space:nowrap;
+      word-break:break-all;
+      text-overflow:ellipsis;
     }
 
     .units-active {