vue 引用 tcplayer 做直播（ 俩个例子，都可以用。替换直播地址即可，后端推流，前端观看。 ）

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

补充JS 得下载到本地，自行引入：

　　

https://imgcache.qq.com/open/qcloud/live/webrtc/js/TXLivePusher-1.0.0.min.js
https://web.sdk.qcloud.com/player/tcplayerlite/release/v2.4.1/TcPlayer-2.4.1.js

例子一：

<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