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

src/components/Course/myNote.vue

@@ -14,8 +14,7 @@
                 </div>
                 <div class="newcote-text">
                     <el-input type="textarea" :autofocus="true" :style="`min-height:${inputHeight}px`" placeholder="好记性不如烂笔头，记录些什么吧～"
-                        v-model="content_new" maxlength="200" :autosize="{ minRows: inputRows, maxRows: 20}"
-                        show-word-limit>
+                        v-model="content_new" maxlength="200" :autosize="{ minRows: inputRows, maxRows: 20}" show-word-limit>
                     </el-input>
                 </div>
             </div>
@@ -23,8 +22,7 @@
             <div  v-if="notetab == 2">
                 <div class="mycote-content" v-show="!isEdit" :style="`height:${listHeight}px`">
                     <div v-if="noteList.length > 0">
-                    <div style="border-bottom:1px solid #4444;padding-bottom:25px;" v-for="note in noteList"
-                        :key="note.id">
+                    <div style="border-bottom:1px solid #4444;padding-bottom:25px;" v-for="note in noteList" :key="note.id">
                         <span class="mycote-time">{{note.sysUpdateTime}}
                             <span class="sm">{{note.openType == 9?'公开':'私密'}}</span>
                             <span class="more">
@@ -32,20 +30,16 @@
                                     <span class="el-dropdown-link">
                                         <svg-icon style="margin-right: 0;font-size:26px;" icon-class="spot"></svg-icon>
                                     </span>
-                                    <el-dropdown-menu slot="dropdown" class="dropdown-box"
-                                        style="background:#333333;border: none;">
+                                    <el-dropdown-menu slot="dropdown" class="dropdown-box"  style="background:#333333;border: none;">
                                         <el-dropdown-item command="a" style="color:#fff" @click.native="noteDel(note)">
-                                            <img style="width:13px;height:18px;vertical-align: middle;"
-                                                src="@/assets/images/icon/note-del.png" /> 删除</el-dropdown-item>
+                                            <img style="width:13px;height:18px;vertical-align: middle;"  src="@/assets/images/icon/note-del.png" /> 删除</el-dropdown-item>
                                         <el-dropdown-item command="b" style="color:#fff" @click.native="noteEdit(note)">
-                                            <img style="width:13px;height:14px;margin-right:4px;vertical-align: middle;"
-                                                src="@/assets/images/icon/note-edit.png" />编辑</el-dropdown-item>
+                                            <img style="width:13px;height:14px;margin-right:4px;vertical-align: middle;"  src="@/assets/images/icon/note-edit.png" />编辑</el-dropdown-item>
                                     </el-dropdown-menu>
                                 </el-dropdown>
                             </span>
                         </span>
-                        <div style="margin-top:10px" class="newcote-time" v-if="note.playTime"
-                            @click="onPlayVideo(note.contentId,note.playTime)">
+                        <div style="margin-top:10px" class="newcote-time" v-if="note.playTime" @click="onPlayVideo(note.contentId,note.playTime)">
                             <img :src="`${webBaseUrl}/images/coteplay.png`" alt="">
                             {{formatSeconds(note.playTime)}}
                         </div>
@@ -73,17 +67,15 @@
                             <img :src="`${webBaseUrl}/images/cotedetel.png`" @click="timeDel()" />
                         </div>
                         <div class="newcote-text">
-                            <el-input type="textarea" :autofocus="true" placeholder="好记性不如烂笔头，记录些什么吧～"
-                                v-model="mynoteData.content" maxlength="200" :autosize="{ minRows: 18, maxRows: 20}"
-                                show-word-limit>
+                            <el-input type="textarea" :autofocus="true" :style="`min-height:${inputHeight}px`" placeholder="好记性不如烂笔头，记录些什么吧～"
+                                v-model="mynoteData.content" maxlength="200" :autosize="{ minRows: inputRows, maxRows: 20}" show-word-limit>
                             </el-input>
                         </div>
                     </div>
                 </div>
             </div>
             <div class="newcote-bottom" v-if="notetab == 1 || isEdit">
-                <span v-if="btnPlayTime" style="cursor: pointer;" @click="videoLocation"> <img :src="`${webBaseUrl}/images/playtime.png`"
-                        alt=""> 视频位置</span>
+                <span v-if="btnPlayTime" style="cursor: pointer;" @click="videoLocation"> <img :src="`${webBaseUrl}/images/playtime.png`" alt=""> 视频位置</span>
                 <el-radio v-if="mynoteData.openType == 9" v-model="editRadio" :label="9">公开</el-radio>
                 <el-radio v-model="editRadio" :label="1">私密</el-radio>
                 <el-button size="small" v-if="notetab != 1" v-show="isEdit" @click="editCancel()">取消</el-button>
@@ -184,7 +176,7 @@ export default {
         },
         data(val){
            if(val.id) {
-            console.log(val,'val');
+            //console.log(val,'val');
             this.mynoteData.courseId = this.courseId;
             this.mynoteData.courseName = this.data.name;
             // this.mynoteData.contentId = this.data.id;

src/components/VideoPlayer/index.vue

@@ -524,6 +524,16 @@ export default {
         document.msFullScreen
       );
     },
+    //开始播放
+    startPlay:function(newTime){
+       if(newTime){
+         this.videoDom.currentTime = newTime;
+         this.barrageTimelineStart = newTime;
+         this.updateProgressBySetTime(newTime);
+       }
+       this.isPlaying = true;
+       this.videoDom.play();
+    },
   },
   watch: {
     currentVolume: function () {
@@ -539,13 +549,13 @@ export default {
         this.$emit('onPlayerEnded', {})
       }
     },
-    notePlay: function(val) {
-      if(val) {
-        this.updateProgressBySetTime(val);
-        this.isPlaying = true;
-        this.videoDom.play();
-      }
-    },
+    // notePlay: function(val) {
+    //   if(val) {
+    //     this.updateProgressBySetTime(val);
+    //     this.isPlaying = true;
+    //     this.videoDom.play();
+    //   }
+    // },
     src: function () {
       // 当视频地址变更时，重载视频
       this.videoDom.load();

src/components/VideoPlayer/progress-bar.vue

@@ -49,7 +49,7 @@ export default {
     };
   },
   mounted() {
-    console.log(this.isDrag,'isDrag');
+    //console.log(this.isDrag,'isDrag');
     //初始化一些固定数据
     let dom_full = this.$el.getElementsByClassName("progress-full")[0];
     this.dom_full = dom_full;

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 {