src/views/live/index.vue

<template>
  <div class="container">
    <div id="id_test_video" style="width:100%; height:auto;"></div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        streaName: ''
      };
    },
    created() {
      let streaName = this.$route.query.id;
      this.streaName = streaName;
    },
    mounted() {
      this.$nextTick(function () {
        var player = new TcPlayer("id_test_video", {
          m3u8: `http://watch.t1j2.com/live/${this.streaName}.m3u8`,
          flv: `http://watch.t1j2.com/live/${this.streaName}.flv`, //增加了一个 flv 的播放地址，用于PC平台的播放 请替换成实际可用的播放地址
          autoplay: true, //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
          poster: "",
          width: "1200", //视频的显示宽度，请尽量使用视频分辨率宽度
          height: "800", //视频的显示高度，请尽量使用视频分辨率高度
        });
      });
    },
    methods: {},
  };
</script>
<style lang="scss" scoped>
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100vh - 50px);
    background-color: #000;
  }
  #id_test_video {
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
<style scoped>
  >>>.vcp-player {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
  }
</style>