vue使用腾讯播放器tcplayer

资源：

参数参考API：
https://cloud.tencent.com/document/product/881/30820
TcPlayer-module-2.4.1.js下载地址：
https://cloud.tencent.com/document/product/881/20207#es-module

1、播放器页面
tcPlayer.vue

<template>
  <div
    class="player"
    :style="'width:' + widthHeigt[0] + '%' + 'height:' + widthHeigt[1] + '%'"
  >
    <div class="video" id="player-container-id" ref="tcplayer"></div>
  </div>
</template>

<script>
import { TcPlayer } from '@/views/tool/TcPlayer-module-2.4.1.js'

export default {
  name: "TcPlayer",
  components: {},
  props: {
    widthHeigt: {
      type: Array,
      default: () => {
        return [100, 100];
      }
    },
    playVideo: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      player: ""
    };
  },
  created() {},
  watch: {
    playVideo: function(newVal) {
      this.play();
    }
  },
  mounted() {
    this.play();
  },
  methods: {
    play() {
      let dom = document.getElementById("player-container-id");
      while (dom.hasChildNodes()) {
        //当div下还存在子节点时 循环继续
        dom.removeChild(dom.firstChild);
        // this.player.destroy();
      }
      // console.log(JSON.stringify(this.playVideo));
      let objectString = JSON.stringify(this.playVideo);
      if (objectString != "{}") {
        this.player = new TcPlayer("player-container-id", {
          m3u8: this.playVideo.m3u8, 
          // m3u8_sd: this.playVideo.m3u8_sd,
          // m3u8_hd: this.playVideo.m3u8_hd,
          // flv_sd: this.playVideo.flv_sd, //请替换成实际可用的播放地址
          // flv_hd: this.playVideo.flv_hd, //请替换成实际可用的播放地址
          autoplay: true, //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
          flash: false,
          h5_flv: true,
          width: this.widthHeigt[0] + "%", //视频的显示宽度，请尽量使用视频分辨率宽度
          height: this.widthHeigt[1] + "%", //视频的显示高度，请尽量使用视频分辨率高度
        });
      }
    },
    destroyPlay() {
      this.player.destroy();
    }
  },
  destroyed() {
    // 页面销毁，同时也销毁 TcPlayer
    this.player.destroy();
  }
};
</script>
<style lang="scss" scoped>
.player {
  width: 100%;
  height: 100%;
  ::v-deep .video {
    width: 100%;
    height: 100%;
    .vcp-player {
      width: 100%;
      height: 100%;
      video {
        width: 100%;
        height: 100%;
        object-fit: fill;
      }
    }
  }
}
</style>

2、vue主页引入

...
<!--录播视频播放-->
    <el-dialog :title="$t('statistic.history.list.record.head.replay')" :visible.sync="liveBoxVisible" :modal="false" width="36%" class="replayRecord">
      <el-row type="flex" justify="center" class="layoutlist">
        <el-col :span="24">
          <TcPlayer ref="TcPlayer" :playVideo="playVideo" :widthHeigt="[100, 100]"></TcPlayer>
        </el-col>
      </el-row>
    </el-dialog>
...
</template>
<script>
import TcPlayer from "./tcplayer"

export default {
  name: "History",
  components: {
    TcPlayer
  },
  data() {
      liveBoxVisible: false,
      playVideo: {
        m3u8:'',
        m3u8_sd:'',
        m3u8_hd:'',
      },
...
}
}