zc_saas_admin/src/components/videoPreview/index.vue

<template>
  <div id="videoPreview">
    <el-dialog
      :visible.sync="diavos"
      width="840px"
      @opened="isOkBf"
      @close="clears"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <div slot="title" class="hearders">
        <div class="leftTitle">视频预览</div>
        <div class="rightBoxs">
          <img src="@/assets/images/Close@2x.png" alt @click="clears" />
        </div>
      </div>
      <div>
        <div id="player" v-if="listData.sectionType === 1"></div>
        <div id="playerzb" v-if="listData.sectionType === 2"></div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="clears">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      vodPlayerJs: "https://player.polyv.net/script/player.js",
      vid: "",
      vidzb: "",
      playerJs:
        "https://player.polyv.net/resp/live-h5-player/latest/liveplayer.min.js",
      vodPlayerJsForTCPlayer:
        "https://web.sdk.qcloud.com/player/tcplayer/release/v5.1.0/tcplayer.v5.1.0.min.js",
      uidzb: "egsxlptzdq",
      fileSetting: {
        desc: "i am desc", // 描述
        cataid: "1639399775001", // 分类ID 可以后端传递 也可以不写 或写死
        tag: "i am tag", // 标签
        luping: 0, // 是否开启视频课件优化处理，对于上传录屏类视频清晰度有所优化：0为不开启，1为开启
        keepsource: 1 // 是否源文件播放（不对视频进行编码）：0为编码，1为不编码
      },
      diavos: false,
      listData: {} //数据
    };
  },
  methods: {
    diavosFun(item) {
      if (item.sectionType === 1) {
        this.vid = item.recordingUrl;
      }
      if (item.sectionType === 2) {
        this.vidzb = item.liveUrl;
      }
      this.listData = item;
      this.diavos = true;
    },
    isOkBf() {
      if (this.listData.sectionType === 1) {
        if(this.listData.viewSign == 2) {
          this.loadPlayerScript_tencent(this.loadPlayer_tencent);
        }else {
          this.loadPlayerScript(this.loadPlayer);
        }
      }
      if (this.listData.sectionType === 2) {
        this.loadPlayerScriptzb(this.loadPlayerzb);
      }
    },
    loadPlayerScript(callback) {
      if (!window.polyvPlayer) {
        const myScript = document.createElement("script");
        myScript.setAttribute("src", this.vodPlayerJs);
        myScript.onload = callback;
        document.body.appendChild(myScript);
      } else {
        callback();
        this.player.on("serverError", (...params) => {
          this.$message.error(returnTitle(params[1]));
          console.log(params);
        });
      }
    },
    loadPlayerScript_tencent(callback) {
      if (!window.TCPlayer) {
        const myScript = document.createElement("script");
        myScript.setAttribute("src", this.vodPlayerJsForTCPlayer);
        myScript.onload = callback;
        document.body.appendChild(myScript);
      } else {
        callback();
        this.player_tencent.on("server", (...params) => {
          this.$message.error(returnTitle(params[1]));
          console.log(params);
        });
      }
    },
    loadPlayer() {
      var self = this;
      const polyvPlayer = window.polyvPlayer;
      self.player = polyvPlayer({
        wrap: "#player",
        width: 800,
        height: 533,
        vid: self.vid,
        teaser_show: 0,
        playsafe: function(vid, next) {
          self.$api.obtainpolyvvideosign(vid).then(res => {
            next(res.data);
          });
        }
      });
    },
    loadPlayer_tencent() {
      var self = this;
      const TCPlayer = window.TCPlayer;
      try {
        let video = document.querySelector("video");
        video.parentNode.removeChild(video);
      } catch (error) {
        console.log("清除video标签异常");
      }
      let player_tencent = document.createElement("video");
      player_tencent.id = "player-tencent";
      document
        .getElementById("player")
        .insertAdjacentElement("afterend", player_tencent);
      self.$api.obtaintcvideosign(self.vid).then(res => {
        self.player_tencent = TCPlayer("player-tencent", {
          width: 800,
          height: 533,
          fileID: self.vid,
          appID: res.data.appID,
          psign: res.data.psign,
          licenseUrl: res.data.licenseUrl
        });
      });
    },
    /**
     * @param {String} 关闭视频窗口-销毁实例
     */
    clears() {
      this.diavos = false;
      if (this.listData.sectionType === 1 && this.player) {
        this.player.destroy();
      }
      if (this.listData.sectionType === 1 && this.player_tencent) {
        this.player_tencent.dispose();
      }
      if (this.listData.sectionType === 2 && this.playerzb) {
        this.playerzb.destroy();
      }
      this.listData = {};
    },
    loadPlayerScriptzb(callback) {
      if (!window.polyvLivePlayer) {
        const myScript = document.createElement("script");
        myScript.setAttribute("src", this.playerJs);
        myScript.onload = callback;
        document.body.appendChild(myScript);
      } else {
        callback();
      }
    },

    loadPlayerzb() {
      var self = this;
      const polyvLivePlayer = window.polyvLivePlayer;
      self.playerzb = polyvLivePlayer({
        wrap: "#playerzb",
        width: 800,
        height: 533,
        uid: self.uidzb,
        vid: self.vidzb
      });
    }
  }
};
</script>

<style lang="less" scoped>
/deep/.el-button {
  border-radius: 8px;
}
/deep/.el-dialog {
  border-radius: 8px;
  .el-dialog__header {
    padding: 0;
    .hearders {
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0px 18px 0px 20px;
      border-bottom: 1px solid #e2e2e2;
      .leftTitle {
        font-size: 14px;
        font-weight: bold;
        color: #2f4378;
      }
      .rightBoxs {
        display: flex;
        align-items: center;
        img {
          width: 14px;
          height: 14px;
          margin-left: 13px;
          cursor: pointer;
        }
      }
    }
  }
  .el-dialog__footer {
    padding: 0;
    .dialog-footer {
      padding: 0px 40px;
      height: 70px;
      border-top: 1px solid #e2e2e2;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
}
.imgBox {
  width: 100%;
  // height: 210px;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  padding: 8px 8px 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .imgLabel {
    flex: 1;
    width: 100%;
    border: 1px dotted #e2e2e2;
    color: #999;
    font-size: 14px;
    cursor: pointer;
    border-radius: 8px;
    .msPhoto {
      display: flex;
      justify-content: center;
      align-items: center;
      max-width: 100%;
      max-height: 270px;
      img {
        max-width: 100%;
        max-height: 270px;
      }
    }
    .imgbbx {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      i {
        font-weight: bold;
        margin: 14px 0;
        font-size: 24px;
      }
    }
  }
  p {
    margin: 5px 0px;
  }
}
</style>