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

腾讯云文档

直播拉流：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.img);
  })
}
// 初始化 视频播放器
init(video, poster) {
  let width = this.getParams("width");
  let height = this.getParams("height");
  var player = new TcPlayer("id_test_video", {
    m3u8: video, //请替换成实际可用的播放地址
    autoplay: false, //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
    poster: { style: "cover", src: poster },
    width: width || "480",
    height: 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.
},
           

 video 地址格式：http://aa.com/xxxxxxx.m3u8

aa 字段为播放域名，需要 CNAME 配置，具体文档：

域名管理：https://cloud.tencent.com/document/product/267/30559

CNAME 配置： https://cloud.tencent.com/document/product/267/30560

没有配置的 m3u8 地址是播放不了的。

不知道配置对了没有可以使用 VLC media player 软件，

安装 - 菜单栏媒体 - 打开网络串流，填入你的 m3u8 地址，播放看能否成功。

而推流可以使用 OBS Studio 软件生成 m3u8 推流资源，

下载（官网要下载半小时） - 安装 - 打开

- 软件窗口下方的来源面板 - 点击+添加“显示器捕获”，

- 打开软件窗口右下方控件面板的“设置”，

- 推流选项： 服务“自定义”，服务器：和上面步骤的域名管理中的推流域名有关，具体填写：

直播码接入：https://cloud.tencent.com/document/product/267/31156  地址生成器 生成出来的前面一段，

而后面一段就是串流秘钥。   （也可以问一下度娘怎么用 obs 进行推流）

示例：

服务器：rtmp://aa.com/live/

串流秘钥：xxxxxxxx?bizid=xx&txSecret=xxxx&txTime=xxxx

- 填写完成就可以点击开始推流了。

官方有没有支持 npm 方式？暂时是没看到有的，但有人封装了官方的 tcplayer 的非官方 npm 方式，

可以在 https://www.npmjs.com/ 这里搜索一下 tcplayer 。

可能由于技术水平不够，我搜到的 3 个都试了，仅最后一个成功了。但最后也取消了用 npm 的方式，而是用了引入保存在本地的官方 js 文件。

 另外，全屏问题：

完。

仅记录，欢迎交流。