Web 端播放测试，建议您选用播放器 SDK 里的 TCPlayerLite 播放器 进行播放，具体请参见 直播播放。

vue中使用动态创建script标签的方式引入：//imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.3.2.js

直接上代码：

...
    <div id="id_test_video"></div>
...

...
data(){
    return {
        options: {
        rtmp: "",
        // m3u8:
        //   "http://hls01open.ys7.com/openlive/f01018a141094b7fa138b9d0b856507b.hd.m3u8",
        m3u8: "",
        flv: "", //请替换成实际可用的播放地址
        autoplay: true, //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
        poster: "",
        width: 863,
        height: 528
      }
    }
}
...


...
// 获取直播详情
    getLiveDetails(roomNum) {
    // 这是后台给的接口，用来获取直播的地址
      LiveDetails(roomNum).then(res => {
        if (res.code == 200) {
          this.LiveDetailsData = res.data;
          console.log(res.data);
          let playList = res.data.playList;
          const HLS = playList.filter(items => items.type == 3);
          const RTMP = playList.filter(items => items.type == 1);
          const FLV = playList.filter(items => items.type == 2);
          this.options.m3u8 = HLS[0].playUrl;
          this.options.flv = FLV[0].playUrl;
          this.options.rtmp = RTMP[0].playUrl;
          
          this.loadScript(() => this.initVideo("id_test_video"), {
            id: "tcPlayerScriptId",
            url:
              "//imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.3.2.js"
          });
        }
      });
    },
    // 动态创建了script标签
    loadScript(callback, params) {
      if (document.getElementById(params.id)) {
        callback();
      } else {
        const script = document.createElement("script");
        script.async = true;
        script.src = params.url;
        script.id = params.id;
        script.onload = () => {
          callback();
        };
        document.body.appendChild(script);
      }
    },
    // 初始化直播
    initVideo(ele) {
      try {
        new TcPlayer(ele, this.options);
      } catch (error) {
        console.log(error);
      }
    }
...