视频弹幕

src/views/bookShelf/videoDetail.vue

@@ -19,8 +19,8 @@
             <div class="danmu-box">
                 <p>{{lessonInfo.play_info.cur_play_user_count}}人正在观看 {{lessonInfo.play_info.barrage_count}}条弹幕</p>
                 <svg-icon icon-class="danmu" :class="[isDanmu?'active':'','icon-danmu']" @click="handleChangeIsDanmu"></svg-icon>
-                <el-input v-model="danmuValue" placeholder="输入弹幕"></el-input>
-                <a @click="sendMsg">发送弹幕</a>
+                <el-input v-model="danmuValue" :readonly="!isDanmu" placeholder="输入弹幕" @blur="danmuValue=danmuValue.trim()"></el-input>
+                <a @click="sendMsg" :class="[isDanmu?'active':'not-active',]">发送弹幕</a>
             </div>
             <div class="mian-left-center">
                 <div class="mian-left-center-left">
@@ -109,6 +109,7 @@ export default {
             }
         },
         play_total_count: null,
+        timer: null
     }
   },
   //计算属性 类似于data概念
@@ -130,6 +131,7 @@ export default {
       if (this.danmuValue) {
         // 发送弹幕消息
         this.commontSet(this.danmuValue)
+        this.addBarrage(this.player._currentTime,this.danmuValue)
         this.danmuValue = null
       }
     },
@@ -139,7 +141,7 @@ export default {
           id: 'chat' + this.danmuID++, //弹幕id,需唯一
           txt: value, // 弹幕文字内容
           style: { // 弹幕自定义样式
-            color: 'red',
+            color: '#f6f6f6',
             fontSize: '20px',
             borderRadius: '50px',
             padding: '5px 11px',
@@ -147,6 +149,18 @@ export default {
           },
         })
     },
+    // 发送弹幕接口
+    addBarrage(time,text){
+        let MethodName = "/CourseServer/Client/ReadingManager/AddBarrage_LBCourseCSItemVideo";
+        let data = {
+            cs_item_id: this.lessonCatalog[this.lessonIndex].id,
+            time_point: time,
+            text: text
+        }
+        getLogin(MethodName, data)
+        .then(() => {
+        })
+    },
     // 开启/关闭弹幕
     handleChangeIsDanmu(){
         let _this = this
@@ -154,8 +168,10 @@ export default {
         if(_this.isDanmu){
             _this.player.danmu.start()
             _this.commontSet('弹幕大军即将来袭~')
+            this.getBarrageList()
         }else{
             _this.player.danmu.stop()
+            clearInterval(this.timer);
         }
     },
     // 切换infotabs
@@ -246,37 +262,8 @@ export default {
                     plugins: [Danmu],
                     danmu: {
                         panel: false, // 弹幕面板
-                        comments: [
-                        {
-                            duration: 15000, // 弹幕持续显示时间，毫秒(最低为5000毫秒)
-                            id: 1, //弹幕id,需唯一
-                            prior: false, // 弹幕优先显示，默认false
-                            color: false, // 彩色弹幕，默认false
-                            txt: 'item.text', // 弹幕文字内容
-                            style: { // 弹幕自定义样式
-                            color: 'red',
-                            fontSize: '20px',
-                            borderRadius: '50px',
-                            padding: '5px 11px',
-                            backgroundColor: 'rgba(255, 255, 255, 0.1)',
-                            },
-                        },
-                        {
-                            duration: 15000, // 弹幕持续显示时间，毫秒(最低为5000毫秒)
-                            id: 2, //弹幕id,需唯一
-                            prior: false, // 弹幕优先显示，默认false
-                            color: true, // 彩色弹幕，默认false
-                            txt: '222222222', // 弹幕文字内容
-                            style: { // 弹幕自定义样式
-                            color: 'red',
-                            fontSize: '20px',
-                            borderRadius: '50px',
-                            padding: '5px 11px',
-                            backgroundColor: 'rgba(255, 255, 255, 0.1)',
-                            },
-                        },
-                    ],
-                    closeDefaultBtn: true, //开启此项后不使用默认提供的弹幕开关，默认使用西瓜播放器提供的开关
+                        comments: [],
+                        closeDefaultBtn: true, //开启此项后不使用默认提供的弹幕开关，默认使用西瓜播放器提供的开关
                     },
                 });
                 this.player.once('play',()=>{
@@ -285,6 +272,10 @@ export default {
                 this.player.on('replay',()=>{
                     this.addPlayRecord()
                 })
+                this.player.on('ended',()=>{
+                    clearInterval(this.timer);
+                })
+                this.getBarrageList()
             }
         })
         .catch(() => {
@@ -301,7 +292,37 @@ export default {
         .then(() => {
 
         })
-    }
+    },
+    // 获取弹幕列表
+    getBarrageList(){
+        this.timer = setInterval(() => {
+            if(!this.player.paused){
+                this.getBarrage()
+            }
+        }, 5000);
+    },
+    // 获取弹幕列表
+    getBarrage(){
+        let MethodName = "/CourseServer/Client/ReadingManager/GetBarrageList_LBCourseCSItemVideo";
+        let currentTime = this.player._currentTime
+        let data = {
+            cs_item_id: this.lessonCatalog[this.lessonIndex].id,
+            begin_time_point: currentTime,
+            end_time_point: currentTime+5,
+            top_n: 100
+        }
+        getLogin(MethodName, data)
+        .then((res) => {
+            if(res.status===1){
+                let time = 5000/res.barrage_list.length
+                res.barrage_list.forEach((item,index)=>{
+                    setTimeout(() => {
+                        this.commontSet(item)
+                    }, currentTime+time*index);
+                })
+            }
+        })
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
@@ -487,7 +508,10 @@ export default {
         border: 1px solid #165DFF;
         background: #165DFF;
         border-radius: 0px 2px 2px 0px;
-
+        &.not-active{
+            cursor: not-allowed;
+            opacity: 0.5;
+        }
     }
   }
   .mian-left-center{