聊天+视频

public/index.html

@@ -6,6 +6,7 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+  <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.3/skins/default/aliplayer-min.css" />
   <title><%= htmlWebpackPlugin.options.title %></title>
 </head>
 

src/components/medicineVideo.vue

@@ -7,7 +7,7 @@
         <el-col :span="14" :push="2">
           <el-card class="video-player">
             <div id="J_prismPlayer" :style="{ height: height + 'px' }">
-              <img src="../assets/pc/img/video-img.jpg" alt />
+              <!-- <img src="../assets/pc/img/video-img.jpg" alt /> -->
             </div>
             <div class="title">
               <div class="video-title">
@@ -119,6 +119,7 @@
               class="messages-content"
               id="commentsList"
               :style="{ height: minHeight + 'px' }"
+              @scroll="changeScrollFlag"
             >
               <div class="item" v-for="(item, i) in commentList" :key="i">
                 <div v-show="item.action == 103">
@@ -208,11 +209,13 @@ export default {
       ],
       commentsText: "",
       // commentApi: {},
-      scrollTop: 0,
+      // scrollTop: 0,
+      //是否滚动屏幕
+      isScrollFlag: false,
       commentList: [],
       wsObj: {},
       roomId: 0,
-      page: 3,
+      myVideoPlayer: null,
     };
   },
 
@@ -227,6 +230,16 @@ export default {
   async mounted() {
     this.linkWebSocket();
     this.scrollToBottom();
+    if (window.Aliplayer) {
+      this.myVideoPlayer = window.Aliplayer;
+    } else {
+      await remoteLoad(
+        "https://g.alicdn.com/de/prismplayer/2.9.3/aliplayer-min.js"
+      );
+      this.myVideoPlayer = window.Aliplayer;
+      console.log(window.Aliplayer);
+    }
+    this.initVideoPlayer();
   },
   methods: {
     handleChange(value) {
@@ -240,22 +253,23 @@ export default {
         container.scrollTop = container.scrollHeight;
       });
     },
-    getNewComments(e) {
+    changeScrollFlag(e) {
+      const self = this;
       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;
-        }
+      let scrollHeight = e.target.scrollHeight;
+      let clientHeight = e.target.clientHeight;
+      let gap = scrollHeight - clientHeight;
+      if (gap > top) {
+        //滚动屏幕，设置对应flag
+        self.isScrollFlag = true;
+      } else {
+        self.isScrollFlag = false;
       }
     },
     linkWebSocket() {
       const self = this;
       let roomId = self.roomId;
+
       let wsObj = new WebSocket(
         "ws://47.75.134.87:9501?roomId=18&userId=7&group=1"
       ); //建立连接
@@ -265,6 +279,7 @@ export default {
         wsObj.send("Hello WebSocket");
       };
       wsObj.onmessage = function (ev) {
+        let scrollFlag = self.isScrollFlag;
         let commentsList = self.commentList;
         //获取后端响应
         let data = ev.data;
@@ -275,7 +290,7 @@ export default {
         }
         if (commentsList.length >= 2) {
           let lastComment = commentsList[commentsList.length - 1];
-          console.log(lastComment);
+          // console.log(lastComment);
           let flag = self.compareTime(
             lastComment.sendTime,
             commentInfo.sendTime
@@ -285,7 +300,9 @@ export default {
           commentInfo.timeFlag = true;
         }
         self.commentList.push(commentInfo);
-        // self.scrollToBottom();
+        if (!scrollFlag) {
+          self.scrollToBottom();
+        }
       };
 
       /*     wsObj.onclose = function (ev) {
@@ -314,7 +331,29 @@ export default {
       wsObj.send(json);
       self.commentsText = "";
     },
-
+    initVideoPlayer() {
+      const myVideoPlayer = this.myVideoPlayer;
+      const self = this;
+      let videoHeight = self.height + "px";
+      var player = new myVideoPlayer(
+        {
+          id: "J_prismPlayer",
+          source: "http://ivi.bupt.edu.cn/hls/btv1hd.m3u8",
+          width: "100%",
+          height: "500px",
+          autoplay: true,
+          isLive: true,
+          rePlay: true,
+          playsinline: true,
+          preload: true,
+          controlBarVisibility: "hover",
+          useH5Prism: true,
+        },
+        function (player) {
+          // alert("The player is created");
+        }
+      );
+    },
     compareTime(oldTime, newTime) {
       let garMinutes = 2;
       let oldDate = new Date(oldTime);