vue3腾讯云直播 前端拉流（前端页面展示直播）

1、引入文件，在index.html

<link href="https://tcsdk.com/player/tcplayer/release/v5.3.2/tcplayer.min.css" rel="stylesheet" />

<!--播放器脚本文件-->
    <script src="https://tcsdk.com/player/tcplayer/release/v5.3.2/tcplayer.v5.3.2.min.js"></script>

2、安装依赖

npm install tcplayer.js

3、在展示直播的vue文件中引入插件和样式文件，例子中的地址都为测试地址（腾讯云控制台->地址生成器生成的,我用的是HLS地址）

<video id="player-container-id" width="700" preload="auto" playsinline webkit-playsinline></video>



import { onMounted, ref } from 'vue';
import TCPlayer from 'tcplayer.js';
import 'tcplayer.js/dist/tcplayer.min.css';//引入插件和样式文件


const getVideo = async () => {
  var player = TCPlayer('player-container-id', {
    sources: [
      {
        src: 'http://www.aaa.com/live/123.m3u8?txSecret=2373be364b6738476278sdkfh98744c2db3c7f2&txTime=342423436' // 播放地址
  
      }
    ],
    licenseUrl: 'http://www.aaa.com/live/123.m3u8?txSecret=2373be364b6738476278sdkfh98744c2db3c7f2&txTime=342423436' // license 地址，必传。参考准备工作部分，在视立方控制台申请 license 后可获得 licenseUrl
  });
};


onMounted(async () => {
  getVideo();
});