弹幕

src/assets/pc/css/commentCoreLibrary.css

@@ -0,0 +1,84 @@
+.abp {
+    position: relative;
+}
+
+.abp .container {
+    border: 0;
+    bottom: 0;
+    display: block;
+    left: 0;
+    margin: 0;
+    overflow: hidden;
+    position: absolute;
+    right: 0;
+    top: 0;
+    touch-callout: none;
+    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    z-index: 9999;
+}
+
+.abp .container .cmt {
+    color: #fff;
+    font-family: SimHei, SimSun, Heiti, "MS Mincho", "Meiryo", "Microsoft YaHei", monospace;
+    font-size: 25px;
+    letter-spacing: 0;
+    line-height: 100%;
+    margin: 0;
+    padding: 3px 0 0 0;
+    position: absolute;
+    text-decoration: none;
+    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
+    -webkit-text-size-adjust: none;
+    -ms-text-size-adjust: none;
+    text-size-adjust: none;
+    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    -webkit-transform-origin: 0% 0%;
+    -ms-transform-origin: 0% 0%;
+    transform-origin: 0% 0%;
+    white-space: pre;
+    word-break: keep-all;
+}
+
+.abp .container .cmt.no-shadow {
+    text-shadow: none;
+}
+
+.abp .container .cmt.reverse-shadow {
+    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
+}
+
+.abp .container .cmt.css-optimize {
+    will-change: transform;
+}
+
+/** Aliases for Chinese named fonts because they don't work on *nix **/
+@font-face {
+    font-family: '\9ED1\4F53';
+    src: local('SimHei');
+}
+
+@font-face {
+    font-family: '\5B8B\4F53';
+    src: local('SimSun');
+}
+
+@font-face {
+    font-family: '\534E\6587\6977\4F53';
+    src: local('SimKai');
+}
+
+@font-face {
+    font-family: '\5E7C\5706';
+    src: local('YouYuan');
+}
+
+@font-face {
+    font-family: '\5FAE\8F6F\96C5\9ED1';
+    src: local('Microsoft YaHei');
+}

src/assets/pc/css/video.css

@@ -0,0 +1,391 @@
+body,
+html {
+  padding: 0;
+  margin: 0;
+}
+
+.video-container {
+  width: 100%;
+  height: 100%;
+  min-width: 1000px;
+  position: relative;
+  /*  display: flex;
+    justify-content: center;*/
+  padding-top: 50px;
+  margin: 0 auto;
+  box-sizing: border-box;
+}
+
+.video-container .back-img {
+  position: absolute;
+  width: 100%;
+  top: 0;
+  left: 0;
+  z-index: -10;
+}
+
+.video-container .video-player {
+  border: 0;
+  margin-right: 10px;
+}
+
+.video-container .video-player .el-card__body {
+  padding: 0;
+}
+
+.title {
+  padding: 0 20px;
+  height: 100px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.title .video-title {
+  position: relative;
+  height: 100%;
+  padding-left: 80px;
+}
+
+.title .video-title .title-img {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  position: absolute;
+  left: 0;
+  top: 20px;
+}
+
+.title .video-title .broadcaster-name {
+  margin-top: 20px;
+  font-size: 20px;
+}
+
+.title .video-title .info {
+  display: flex;
+  justify-content: flex-start;
+  margin-top: 20px;
+  font-size: 13px;
+}
+
+.viewer-num {
+  margin-right: 20px;
+}
+
+.title .video-title .info .share {
+  cursor: pointer;
+}
+
+.title .present {
+  position: relative;
+  text-align: center;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  border: 1px solid #ebeef5;
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
+  font-size: 12px;
+  margin-bottom: 20px;
+}
+
+.title .present .present-btn {
+  width: 41px;
+  height: 41px;
+  border-radius: 50%;
+  border: 1px solid #ebeef5;
+  margin: 3px;
+  background-color: #DEBD57;
+  cursor: pointer;
+}
+
+.title .present .present-btn > img {
+  width: 50px;
+  position: absolute;
+  left: 50%;
+  top: 0;
+  bottom: 0;
+  transform: translateX(-50%);
+}
+
+.title .present .present-btn:hover > img {
+  width: 56px;
+  top: -3px;
+}
+
+.video-container .video-player .barrage {
+  height: 40px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20px;
+}
+
+.video-container .video-player .barrage > .video-mobile {
+  cursor: pointer;
+}
+
+.video-container .video-player .barrage > .barrage-btn .el-switch {
+  margin-left: 10px;
+}
+
+.video-container .video-player img {
+  width: 100%;
+}
+
+.video-container .comments {
+  margin-left: 10px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.video-container .comments .el-card__body {
+  padding: 10px;
+}
+
+.video-container .comments .el-card__body .cose-title {
+  text-align: center;
+  border-bottom: 1px solid #ebeef5;
+  line-height: 40px;
+}
+
+.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 {
+  margin-top: 15px;
+}
+
+.video-container .comments .messages-content > .item .time {
+  font-size: 12px;
+  color: #bbb;
+  text-align: center;
+  padding: 8px 0;
+}
+
+.video-container .comments .messages-content > .item .message {
+  display: flex;
+  justify-content: flex-start;
+}
+
+.video-container .comments .messages-content > .item .message .head-img {
+  padding-right: 10px;
+}
+
+.video-container .comments .messages-content > .item .message .head-img > img {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+}
+
+.video-container .comments .messages-content > .item .message .word .user {
+  font-size: 12px;
+  color: #454545;
+}
+
+.video-container .comments .messages-content > .item .message .word .tidings {
+  display: inline-block;
+  margin-top: 6px;
+  font-size: 12px;
+  color: #454545;
+  background-color: #f2f6fd;
+  padding: 8px 10px;
+  line-height: 16px;
+  border-radius: 0px 8px 8px 8px;
+  letter-spacing: 1px;
+}
+
+.video-container .comments .messages-content .item101 {
+  margin: 0px auto;
+  color: #ccc;
+  font-size: 12px;
+  text-align: center;
+}
+
+.video-container .comments .send {
+  display: flex;
+  justify-content: center;
+}
+
+.video-container .comments .send .textbox {
+  flex: 1;
+  margin-right: 10px;
+}
+
+.video-container .comments .send .el-input__inner {
+  height: 33px;
+  line-height: 33px;
+}
+
+.video-container .comments .send .el-button {
+  padding: 8px 14px;
+}
+
+.card {
+  background-color: #fff;
+  border: 1px solid #ebeef5;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  border-radius: 6px;
+}
+
+.icon {
+  font-size: 16px;
+  color: #448AFF;
+  margin-right: 5px;
+}
+
+.present-content > .present-title {
+  font-size: 17px;
+  font-weight: 600;
+  text-align: center;
+  width: 100%;
+  line-height: 20px;
+  height: 30px;
+  color: #000;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.present-content > .content {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.present-content > .content > .item {
+  width: 90px;
+  height: 110px;
+  margin: 5px 5px;
+  padding: 5px 5px;
+  text-align: center;
+  border: 1px solid #fff;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.present-content > .content > .item img {
+  width: 60px;
+  height: 60px;
+}
+
+.present-content > .content > .item p {
+  margin: 5px 0 0 0;
+  font-size: 12px;
+}
+
+.present-content > .content > .item .price {
+  color: #999;
+}
+
+.present-content > .content > .item > .present-send {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.present-info {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.present-img {
+  width: 80px;
+}
+
+.present-desc {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  margin-left: 12px;
+  height: 80px;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.present-desc > p {
+  text-align: left;
+  margin: 0;
+  font-size: 16px;
+}
+
+.present-desc .present-num {
+  width: 200px;
+  height: 30px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.present-desc .present-num .el-input-number {
+  width: 80px;
+  line-height: 18px;
+}
+
+.present-desc .present-num .el-input-number .el-input-number__decrease,
+.present-desc .present-num .el-input-number .el-input-number__increase {
+  width: 21px;
+}
+
+.present-desc .present-num .el-input-number .el-input__inner {
+  height: 20px;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+.present-totalprice {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 12px;
+}
+
+.present-totalprice > .send .el-button {
+  padding: 5px 15px;
+  font-size: 12px;
+}
+
+.present-content > .content > .item:hover {
+  border: 1px solid #F78989;
+  border-radius: 4px;
+  box-shadow: 0 2px 5px 0 rgba(247, 137, 137, 0.5);
+}
+
+.present-content > .content > .item:hover .price {
+  color: #F78989;
+}
+
+.present-content > .present-num {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.present-active {
+  border: 1px solid #F78989;
+  border-radius: 4px;
+  box-shadow: 0 2px 5px 0 rgba(247, 137, 137, 0.5);
+}
+
+.present-active .price {
+  color: #F04040;
+}
+
+.c-666 {
+  color: #666;
+}
+
+.isNotBarrage {
+  visibility: hidden;
+}

src/assets/pc/css/video.scss

@@ -410,4 +410,9 @@ html {
 
 .c-666 {
     color: #666;
+}
+
+//关闭弹幕
+.isNotBarrage {
+    visibility: hidden;
 }

src/components/medicineVideo.vue

@@ -6,8 +6,15 @@
       <el-row>
         <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 /> -->
+            <div
+              id="J_prismPlayer"
+              :style="{ height: height + 'px' }"
+              class="abp"
+            >
+              <div
+                id="my-comment-stage"
+                :class="[barrageFlag ? '' : 'isNotBarrage', 'container']"
+              ></div>
             </div>
             <div class="title">
               <div class="video-title">
@@ -159,10 +166,6 @@
         </el-col>
       </el-row>
     </div>
-
-    <div
-      style="height: 1000px; background-color: #232323; margin-top: 100px"
-    ></div>
   </div>
 </template>
 
@@ -170,6 +173,7 @@
 import remoteLoad from "../util/remoteLoad";
 import moment from "moment";
 import "../assets/pc/css/video.scss";
+import "../assets/pc/css/commentCoreLibrary.css";
 export default {
   data() {
     return {
@@ -216,6 +220,9 @@ export default {
       wsObj: {},
       roomId: 0,
       myVideoPlayer: null,
+      myCommentManager: null,
+      myCM: null,
+      danmakuList: [],
     };
   },
 
@@ -228,6 +235,26 @@ export default {
     this.minHeight = this.commentsHeight - 41 - 33 - 27;
   },
   async mounted() {
+    if (window.CommentManager) {
+      this.myCommentManager = window.CommentManager;
+    } else {
+      await remoteLoad(
+        "https://llzsh-test-hk.oss-cn-hongkong.aliyuncs.com/video_live/commentCoreLibrary.js?OSSAccessKeyId=LTAI4GAcvDdAFKpRyWBtGiXu&Expires=3601620636615&Signature=65kMAO%2FAxAk6KoJp6bs0ZpZuQgI%3D"
+      );
+      this.myCommentManager = window.CommentManager;
+      // console.log(window.CommentManager);
+    }
+    const myCommentManager = this.myCommentManager;
+    //初始化弹幕
+    const CM = new myCommentManager(
+      document.getElementById("my-comment-stage")
+    );
+    CM.init(); // 初始化
+    // let danmakuList = [];
+    // CM.load(danmakuList);
+    CM.start();
+    this.myCM = CM;
+    //链接ws
     this.linkWebSocket();
     this.scrollToBottom();
     if (window.Aliplayer) {
@@ -269,6 +296,7 @@ export default {
     linkWebSocket() {
       const self = this;
       let roomId = self.roomId;
+      let myCM = self.myCM;
 
       let wsObj = new WebSocket(
         "ws://47.75.134.87:9501?roomId=18&userId=7&group=1"
@@ -285,9 +313,11 @@ export default {
         let data = ev.data;
         let commentInfo = JSON.parse(data);
         // console.log(commentInfo);
+        //保存房间id
         if (roomId == 0 && commentInfo.roomId) {
           self.roomId = commentInfo.roomId;
         }
+        //根据评论时间判断是否显示时间
         if (commentsList.length >= 2) {
           let lastComment = commentsList[commentsList.length - 1];
           // console.log(lastComment);
@@ -299,7 +329,21 @@ export default {
         } else {
           commentInfo.timeFlag = true;
         }
+        //更新评论列表
         self.commentList.push(commentInfo);
+
+        //更新弹幕列表，只保留类型为文本的数据  103类型
+        if (commentInfo.action == 103) {
+          let cmObject = {
+            mode: 1,
+            text: commentInfo.content,
+            stime: 0,
+            size: 25,
+            color: 0xffffff,
+          };
+          myCM.send(cmObject);
+        }
+        //判断是否上滚
         if (!scrollFlag) {
           self.scrollToBottom();
         }