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

大个个个个个儿

已于 2025-04-09 18:20:55 修改

阅读量272

点赞数 1

分类专栏：腾讯云直播 vue javascript 文章标签：前端腾讯云 javascript

于 2025-04-09 18:20:14 首次发布

本文链接：https://blog.youkuaiyun.com/qq_40269801/article/details/147099537

版权

vue 同时被 3 个专栏收录

36 篇文章

订阅专栏

javascript

34 篇文章

订阅专栏

腾讯云直播

3 篇文章

订阅专栏

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();
});