例子一比例子二更加容易被理解。另外 m3u8 也支援 webrtc 開頭的直播地址。

例子一：

<template>
  <!-- 測試-->
  <div id="palyback">
    <div :class="{'else': onswitch}">
      <div id="player-container-id"></div>
    </div>
    <!-- <div :class="{'else': !onswitch}">
      <div id="player-container"></div>
    </div> 
 
-->
    <!-- <div class="box-title" @click="onchange">切換</div> -->
  </div>
  
</template>
 
<script>
import { TcPlayer } from '@/common/TcPlayer-module-2.4.1'
import { TXLivePusher } from '@/common/TXLivePusher-1.0.0.min'
  export default {
    data() {
      return {
        player: 
 
null,
        // onswitch: false
      }
    },
 
    mounted() {
      this.playVideo()
    },
 
    methods: {
      playVideo() {
        document.getElementById('player-container-id').innerHTML = ""
        this.player = new TcPlayer('player-container-id', {
          "m3u8": 'webrtc://pull.wiseuc.com/live/test
 
', //請替換成實際可用的播放地址
          "autoplay": true, //iOS下safari瀏覽器，以及大部分移動端瀏覽器是不開放視訊自動播放這個能力的
          // "coverpic": img,
          "width": '100%', //視訊的顯示寬度，請儘量使用視訊解析度寬度
          "height": '100%', //視訊的顯示高度，請儘量使用視訊解析度高度
          "remember": 1
        });
 
        this.player = new TcPlayer('player-container', {
          "m3u8": 'webrtc://pull.wiseuc.com/live/test', //請替換成實際可用的播放地址
          "autoplay": true, //iOS下safari瀏覽器，以及大部分移動端瀏覽器是不開放視訊自動播放這個能力的
          // "coverpic": img,
          "width": '100%', //視訊的顯示寬度，請儘量使用視訊解析度寬度
          "height": '100%', //視訊的顯示高度，請儘量使用視訊解析度高度
          "remember": 1
        });
      },
 
      // // 切換
      // onchange() {
      //   this.onswitch = !this.onswitch
      // }
    }
  }
</script>
 
<style scoped>
  #palyback {
    margin-top: 5%;
    width: 70%;
    height: 80%;
    box-sizing: border-box;
    padding-top: 2rem;
    min-width: 59.375rem;
    position: relative;
  }
  .else {
    width: 400px;
    position: absolute;
    top: 3%;
    right: 2%;
    z-index: 100;
  }
 
  .box-title {
    width: 50px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: pink;
    position: absolute;
    bottom: 3%;
    right: 2%;
  }
</style>

例子二：

<template>
  <!-- 測試-->
  <div id="palyback">
    <div id="id_test_video" style="width:100%; height:auto;"></div>
  </div>
</template>
 
<script>
import { TcPlayer } from '@/common/TcPlayer-module-2.4.1'
import { TXLivePusher } from '@/common/TXLivePusher-1.0.0.min'
  export default {
    data() {
      return {
        player: null,
        onswitch: false
      }
    },
 
    mounted() {
      this.getPlayUrl()
    },
 
    methods: {

        // 直播地址
        getPlayUrl() {
         this.init();
        },
        // 初始化 視訊播放器
        init(video, poster) {
        // let width = this.getParams("width");
        // let height = this.getParams("height");
        var player = new TcPlayer("id_test_video", {
          m3u8: 'webrtc://pull.wiseuc.com/live/test', //請替換成實際可用的播放地址
          autoplay: false, //iOS 下 safari 瀏覽器，以及大部分移動端瀏覽器是不開放視訊自動播放這個能力的
          poster: { style: "cover", src: poster },
          width: "480",
          height:  "211",
          live: true,
          // controls:'system', // default 顯示預設控制元件，none 不顯示控制元件，system 移動端顯示系統控制元件 備註：如果需要在移動端使用系統全屏，就需要設定為system。預設全屏方案是使用 Fullscreen API + 偽全屏的方式例子 
          pausePosterEnabled: true,
          volume: 0.5,
          systemFullscreen: true,
          x5_orientation: 0
        });
        document.getElementsByClassName("vcp-error-tips")[0].style.fontSize =  "14px";// 錯誤碼提示語字型大小，因引入了rem，預設字型大小為100px.
        },
          }
        }
</script>
 
<style scoped>
  #palyback {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding-top: 2rem;
    background-color: #1c302e;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 59.375rem;
    position: relative;
  }
  .else {
    width: 400px;
    position: absolute;
    top: 3%;
    right: 2%;
    z-index: 100;
  }
 
  .box-title {
    width: 50px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: pink;
    position: absolute;
    bottom: 3%;
    right: 2%;
  }
</style>

最後感謝倆位大神的幫助：

https://blog.csdn.net/ITLISHUANG/article/details/108167296

https://blog.csdn.net/qq_33462132/article/details/103684605