all

src/assets/pc/css/video.scss

@@ -23,7 +23,6 @@ html {
     }
 
     .video-player {
-        height: 630px;
         border: 0;
         margin-right: 10px;
 
@@ -31,9 +30,7 @@ html {
             padding: 0;
         }
 
-        .player {
-            height: 480px;
-        }
+
 
         @at-root .title {
             padding: 0 20px;
@@ -145,11 +142,11 @@ html {
     }
 
     .comments {
-        height: 600px;
         margin-left: 10px;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
+
         .el-card__body {
             padding: 10px;
 
@@ -163,6 +160,18 @@ html {
         .messages-content {
             flex: 1;
             min-height: 500px;
+            overflow-y: auto;
+            scrollbar-width: none;
+            /* Firefox */
+            -ms-overflow-style: none;
+
+            /* IE 10+ */
+            &::-webkit-scrollbar {
+                display: none;
+                /* Chrome Safari */
+            }
+            margin-bottom: 10px;
+
             >.item {
                 margin-top: 4px;
 
@@ -211,18 +220,20 @@ html {
             }
         }
 
-        .send{
+        .send {
             display: flex;
             justify-content: center;
-            
-            .textbox{
+
+            .textbox {
                 flex: 1;
                 margin-right: 10px;
             }
-            .el-input__inner{
+
+            .el-input__inner {
                 height: 33px;
                 line-height: 33px;
             }
+
             .el-button {
                 padding: 8px 14px;
             }

src/assets/pc/css/video.wxss

@@ -24,7 +24,6 @@ html {
 }
 
 .video-container .video-player {
-  height: 630px;
   border: 0;
   margin-right: 10px;
 }
@@ -33,10 +32,6 @@ html {
   padding: 0;
 }
 
-.video-container .video-player .player {
-  height: 480px;
-}
-
 .title {
   padding: 0 20px;
   height: 100px;
@@ -138,7 +133,6 @@ html {
 }
 
 .video-container .comments {
-  height: 600px;
   margin-left: 10px;
   display: flex;
   flex-direction: column;
@@ -158,6 +152,17 @@ html {
 .video-container .comments .messages-content {
   flex: 1;
   min-height: 500px;
+  overflow-y: auto;
+  scrollbar-width: none;
+  /* Firefox */
+  -ms-overflow-style: none;
+  /* IE 10+ */
+  margin-bottom: 10px;
+}
+
+.video-container .comments .messages-content::-webkit-scrollbar {
+  display: none;
+  /* Chrome Safari */
 }
 
 .video-container .comments .messages-content > .item {

src/components/medicineVideo.vue

@@ -6,7 +6,7 @@
       <el-row>
         <el-col :span="14" :push="2">
           <el-card class="video-player">
-            <div id="J_prismPlayer" class="player">
+            <div id="J_prismPlayer" :style="{ height: height + 'px' }">
               <img src="../assets/pc/img/video-img.jpg" alt />
             </div>
             <div class="title">
@@ -113,10 +113,15 @@
           </el-card>
         </el-col>
         <el-col :span="6" :push="2">
-          <el-card class="comments">
+          <el-card class="comments" :style="{ height: commentsHeight + 'px' }">
             <div class="cose-title">聊天互动</div>
-            <div class="messages-content">
-              <div class="item">
+            <div
+              class="messages-content"
+              id="commentsList"
+              :style="{ height: minHeight + 'px' }"
+              @scroll="getNewComments"
+            >
+              <div class="item" v-for="(item, i) in list" :key="i">
                 <div class="time">2021-01-01 22:22</div>
                 <div class="message">
                   <div class="head-img">
@@ -127,22 +132,7 @@
                   </div>
                   <div class="word">
                     <div class="user">上海市网友</div>
-                    <div class="tidings">111</div>
-                  </div>
-                </div>
-              </div>
-              <div class="item">
-                <!-- <div class="time">2021-01-01 22:22</div> -->
-                <div class="message">
-                  <div class="head-img">
-                    <img
-                      src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1429871452,4246708244&fm=26&gp=0.jpg"
-                      alt=""
-                    />
-                  </div>
-                  <div class="word">
-                    <div class="user">上海市网友</div>
-                    <div class="tidings">111</div>
+                    <div class="tidings">{{i }}</div>
                   </div>
                 </div>
               </div>
@@ -150,9 +140,14 @@
 
             <div class="send">
               <div class="textbox">
-                <el-input v-model="tidings" placeholder="我也来说几句"></el-input>
+                <el-input
+                  v-model="tidings"
+                  placeholder="我也来说几句"
+                ></el-input>
+              </div>
+              <div class="send-btn">
+                <el-button type="primary">发送</el-button>
               </div>
-              <div class="send-btn"><el-button type="primary">发送</el-button></div>
             </div>
           </el-card>
         </el-col>
@@ -166,13 +161,21 @@
 </template>
 
 <script>
-import { strToObject, initMudu, initPlayer } from "../util/video.js";
+import {
+  strToObject,
+  initMudu,
+  getMsgList,
+  initPlayer,
+} from "../util/video.js";
 import "../assets/pc/css/video.scss";
 export default {
   data() {
     return {
-      width: 1024,
-      height: 500,
+      windowWidth: document.documentElement.clientWidth, //实时屏幕宽度
+      width: 876,
+      height: 492,
+      commentsHeight: 629,
+      minHeight: 528,
       presentNum: 1,
       barrageFlag: true,
       presentList: [
@@ -202,24 +205,62 @@ export default {
           price: "免费",
         },
       ],
-      tidings:''
+      tidings: "",
+      commentApi: {},
+      scrollTop: 0,
+      list: [1, 2, 3, 4, 5, 6, 7, 8, 9],
+      page: 3,
     };
   },
 
-  created() {},
-  mounted() {
-    // 初始化播放器
-    /*   initMudu({
-        id:'J_prismPlayer',
-        width:this.width,
-        height:this.height
-      }); */
+  async created() {
+    console.log("--------------------------");
+    let scale = this.windowWidth / 1536;
+    this.height = parseInt(scale * 492);
+    this.width = parseInt(scale * 876);
+    this.commentsHeight = this.height + 139;
+    this.minHeight = this.commentsHeight - 41 - 33 - 27;
+    // 初始化播放器+
+    this.commentApi = await initMudu({
+      id: "J_prismPlayer",
+      width: this.width,
+      height: this.height,
+    });
+    console.log("-----------22222222---------");
+    let c = await getMsgList(this.commentApi, 0);
+    console.log(c);
+    this.scrollToBottom();
   },
+  async mounted() {},
   methods: {
     handleChange(value) {
       this.$data.presentNum = value;
       console.log(this.$data.presentNum);
     },
+    getComments(page) {
+      getMsgList(1);
+    },
+
+    //评论显示从下到上
+    scrollToBottom() {
+      this.$nextTick(() => {
+        var container = this.$el.querySelector("#commentsList");
+        container.scrollTop = container.scrollHeight;
+      });
+    },
+    getNewComments(e) {
+      let top = e.target.scrollTop;
+      if (e.target.scrollTop == 0) { 
+        console.log("到顶了");
+        console.log(this.page);
+        if (this.page > 0) {
+          this.list.unshift(10, 11, 12, 13, 14, 15, 16, 17, 18, 19, '间隔');
+          console.log(this.page);
+          console.log(this.list)
+          this.page -= this.page;
+        }
+      }
+    },
   },
 };
 </script>

src/util/video.js

@@ -3,7 +3,7 @@ import {
 } from 'vant';
 
 // 处理返回字符串中含有特殊字符问题
-export function checkStr(str){
+export function checkStr(str) {
     return str.split(""").join("");
 }
 
@@ -22,14 +22,25 @@ export function strToObject(jsonStr) {
 const mid = 489497;
 // 初始化Mudu
 
-export function initMudu(obj) {
-    Mudu.Init(
-        mid,
-        function () {
-            console.log('Mudu Web Sdk 初始化成功');
-            initPlayer(obj)
-        })
+export async function initMudu(obj) {
+
+    return new Promise((resolve, reject) => {
+        let comment;
+        Mudu.Init(
+            mid,
+            function () {
+                initPlayer(obj);
+                comment = Mudu.Room.Comment;
+                resolve(comment);
+            })
+
+
+    })
+
+
 }
+
+
 // 激活播放器
 // 传入参数obj{id,width,height}
 export function initPlayer(obj) {
@@ -57,32 +68,42 @@ export function initPlayer(obj) {
 }
 
 // 获取弹幕
-export function getMsgList(page) {
-    Mudu.Room.Comment.Get(
-        // 要获取评论的页码，类型为int
-        page,
-        // 评论获取成功的回调函数，参数为response对象
-        function (response) {
-            response = JSON.parse(response)
-            if (response.status === 'y') {
-                // console.log('获取评论成功，数据为：', response.data)
-                return {
-                    status: 0,
-                    data: response.data
-                };
-            }
-            if (response.status === 'n') {
-                // console.log('获取评论失败')
-                return {
-                    status: 1,
-                    data:{}
+export async function getMsgList(comment, page) {
+    let p = comment.GetPage();
+    page = page?page:p;
+    console.log(page)
+    return new Promise((resolve, reject) => {
+        comment.Get(
+            // 要获取评论的页码，类型为int
+            page,
+            // 评论获取成功的回调函数，参数为response对象
+            function (response) {
+                response = JSON.parse(response)
+                if (response.status === 'y') {
+                    console.log('获取评论成功，数据为：', response.data)
+                    resolve({
+                        status: 0,
+                        data: response.data
+                    })
+                }
+                if (response.status === 'n') {
+                    console.log('获取评论失败')
+                    resolve({
+                        status: 1,
+                        data: {}
+                    })
                 }
             }
-        }
-    )
+        )
+
+
+    })
+
 }
 
 
+
+
 // 发送评论
 export function sendMsg(msg) {
     Mudu.Room.Comment.Send(