腾讯云直播 tcplayer，前端 vue 项目经验记录

原创

于 2019-12-24 16:51:57 发布 · 6.6k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#前端H5 #vue #腾讯云直播推流 tcplayer

腾讯云文档
直播拉流：https://cloud.tencent.com/document/product/454/7503

1. 在 index.html 中引入初始化脚本（可将其保存在本地）

<script src="//imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.3.2.js" charset="utf-8"></script>;

2. 在 vue 组件中放置容器

<div id="id_test_video" style="width:100%; height:auto;"></div>

3. 对接视频播放

getParams(name) {
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
  var r = window.location.search.substr(1).match(reg);
  if (r != null) {
    return decodeURIComponent(r[2]);
  }
  return null;
},

// 直播地址
getPlayUrl() {
  this.$api.getPlayUrl().then(res => {
    this.init(res.data.playUrl, res.data.im