live-website/src/components/medicineVideo.vue

<template>
  <div>
    <div class="video-container">
      <img src="../assets/pc/img/bg@3x.png" alt="" class="back-img" />

      <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>
            <div class="title">
              <div class="video-title">
                <img src="../assets/pc/img/title-img.jpg" class="title-img" />
                <div class="broadcaster-name">恒瑞测试</div>
                <div class="info">
                  <div class="viewer-num">
                    <i class="el-icon-view icon"></i>观众：588
                  </div>
                  <div class="share">
                    <i class="el-icon-share icon"></i>分享
                  </div>
                </div>
              </div>
              <div class="present">
                <el-popover
                  placement="right"
                  title=""
                  width="450"
                  trigger="click"
                >
                  <div class="present-content">
                    <div class="present-title">打赏</div>
                    <div class="content">
                      <!-- 礼物赠送 -->
                      <div
                        class="item"
                        v-for="(item, i) in presentList"
                        :key="item.img"
                      >
                        <el-popover
                          placement="top-end"
                          title=""
                          width="300"
                          trigger="click"
                        >
                          <div class="present-send">
                            <div class="present-info">
                              <div>
                                <img
                                  :src="item.img"
                                  alt=""
                                  class="present-img"
                                />
                              </div>
                              <div class="present-desc">
                                <p>{{ item.desc }}</p>
                                <div class="present-num">
                                  <div>数量：</div>
                                  <el-input-number
                                    v-model="presentNum"
                                    @change="handleChange"
                                    :min="1"
                                    :max="99"
                                    label=""
                                  ></el-input-number>
                                </div>
                              </div>
                            </div>
                            <div class="present-totalprice">
                              <div>
                                <span>合计：</span
                                ><span style="color: #f04040">{{
                                  item.price
                                }}</span>
                              </div>
                              <div class="send">
                                <el-button type="danger">赠送</el-button>
                              </div>
                            </div>
                          </div>

                          <div slot="reference">
                            <img :src="item.img" alt="" />
                            <p>{{ item.desc }}</p>
                            <p class="price">{{ item.price }}</p>
                          </div>
                        </el-popover>
                      </div>
                    </div>
                  </div>
                  <div class="present-btn" slot="reference">
                    <img src="../assets/pc/img/present.png" alt="" />
                  </div>
                </el-popover>

                <span style="line-height: 30px" class="c-666"> 打赏 </span>
              </div>
            </div>
            <div class="barrage">
              <div class="video-mobile c-666">
                <i class="el-icon-mobile icon"></i>手机观看
              </div>
              <div class="barrage-btn c-666">
                弹幕<el-switch
                  v-model="barrageFlag"
                  active-color="#409EFF"
                  inactive-color="#cccccc"
                >
                </el-switch>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6" :push="2">
          <el-card class="comments" :style="{ height: commentsHeight + 'px' }">
            <div class="cose-title">聊天互动</div>
            <div
              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">
                  <div class="time" v-show="item.timeFlag">
                    {{ item.sendTime }}
                  </div>
                  <div class="message">
                    <div class="head-img">
                      <img :src="item.head_img" alt="" />
                    </div>
                    <div class="word">
                      <div class="user">
                        {{ item.user_name || "上海市网友" }}
                      </div>
                      <div class="tidings">{{ item.content }}</div>
                    </div>
                  </div>
                </div>
                <div v-show="item.action == 101" class="item101">
                  {{ item.content }}
                </div>
              </div>
            </div>

            <div class="send">
              <div class="textbox">
                <el-input
                  v-model="commentsText"
                  placeholder="我也来说几句"
                ></el-input>
              </div>
              <div class="send-btn">
                <el-button type="primary" @click="sendComment">发送</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div
      style="height: 1000px; background-color: #232323; margin-top: 100px"
    ></div>
  </div>
</template>

<script>
import remoteLoad from "../util/remoteLoad";
import moment from "moment";
import "../assets/pc/css/video.scss";
export default {
  data() {
    return {
      windowWidth: document.documentElement.clientWidth, //实时屏幕宽度
      width: 876,
      height: 492,
      commentsHeight: 629,
      minHeight: 528,
      presentNum: 1,
      barrageFlag: true,
      presentList: [
        {
          img: "https://static.mudu.tv/assets/img/console/reward/call.png",
          desc: "为你打call",
          price: "免费",
        },
        {
          img: "https://static.mudu.tv/assets/img/console/reward/heart.png",
          desc: "怦然心动",
          price: "免费",
        },
        {
          img: "https://static.mudu.tv/assets/img/console/reward/flower.png",
          desc: "鲜花礼盒",
          price: "免费",
        },
        {
          img: "https://static.mudu.tv/assets/img/console/reward/rock.gif",
          desc: "冲天云彩大火箭",
          price: "免费",
        },
        {
          img: "https://static.mudu.tv/assets/img/console/reward/yacht.png",
          desc: "梦幻环游飞艇",
          price: "免费",
        },
      ],
      commentsText: "",
      // commentApi: {},
      // scrollTop: 0,
      //是否滚动屏幕
      isScrollFlag: false,
      commentList: [],
      wsObj: {},
      roomId: 0,
      myVideoPlayer: null,
    };
  },

  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;
  },
  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) {
      this.$data.presentNum = value;
      console.log(this.$data.presentNum);
    },
    //评论显示从下到上
    scrollToBottom() {
      this.$nextTick(() => {
        var container = this.$el.querySelector("#commentsList");
        container.scrollTop = container.scrollHeight;
      });
    },
    changeScrollFlag(e) {
      const self = this;
      let top = e.target.scrollTop;
      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"
      ); //建立连接
      self.wsObj = wsObj;
      wsObj.onopen = function () {
        //发送请求
        wsObj.send("Hello WebSocket");
      };
      wsObj.onmessage = function (ev) {
        let scrollFlag = self.isScrollFlag;
        let commentsList = self.commentList;
        //获取后端响应
        let data = ev.data;
        let commentInfo = JSON.parse(data);
        // console.log(commentInfo);
        if (roomId == 0 && commentInfo.roomId) {
          self.roomId = commentInfo.roomId;
        }
        if (commentsList.length >= 2) {
          let lastComment = commentsList[commentsList.length - 1];
          // console.log(lastComment);
          let flag = self.compareTime(
            lastComment.sendTime,
            commentInfo.sendTime
          );
          commentInfo.timeFlag = flag;
        } else {
          commentInfo.timeFlag = true;
        }
        self.commentList.push(commentInfo);
        if (!scrollFlag) {
          self.scrollToBottom();
        }
      };

      /*     wsObj.onclose = function (ev) {
        alert("close");
      };
      wsObj.onerror = function (ev) {
        alert("error");
      }; */
    },
    sendComment() {
      const self = this;
      let wsObj = self.wsObj;
      let roomId = self.roomId;
      let commentContent = self.commentsText;
      let comment = {
        action: "roomBroadcast",
        controller: "broadcast",
        params: {
          content: commentContent,
          type: "txt",
          roomId: roomId,
          group: 1,
        },
      };
      let json = JSON.stringify(comment);
      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);
      let newDate = new Date(newTime);
      let o_time = oldDate.getTime();
      let n_time = newDate.getTime();
      let gapTime = n_time - o_time;
      let flag;
      if (gapTime > garMinutes * 60 * 1000) {
        flag = true;
      } else {
        flag = false;
      }
      return flag;
    },
  },
};
</script>