1. 在react项目中引入TcPlayer

TcPlayer暂不支持npm安装的方式引入，需要在全局html中添加如下script标签（webpack中写的html模版文件，前后端分离的项目中需要后端配合添加）

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

检查element中是否有该标签来判断是否引入成功

2. 判断引用的直播流是否可用

下载VLC客户端【参考下载地址：www.videolan.org/】 输入该URL看是否能播放

3. 具体代码实现

componentDidMount () {
    const player =  new window.TcPlayer('id_test_video', {
      "m3u8": "http://ivi.bupt.edu.cn/hls/cctv5phd.m3u8", // 要播放的直播流的地址（该地址可用）
      "autoplay" : true, // 是否自动播放
      "width" :  "960",
      "height" : "640",
      "live": true,  // 区别直播和点播
    })
  }

<div id="id_test_video" className="tc-video"></div>

4. 踩的坑

出现问题：用video.js写的视频组件不可用

分析原因：TcPlayer基于video.js开发，对video.js的一些内容进行了改造，两者的一些全局变量产生了冲突

解决方案：由于TcPlayer对直播的延迟等有一定处理，所以用该插件实现直播；舍弃了原本用video.js写的视频组件，用原生html的video标签重新开发

5. 参考资料：

[1] cloud.tencent.com/document/pr… 【官方文档】

[2] www.cnblogs.com/stnlcd/p/72… 【一篇摘出官方文档核心内容的博客】

[3] blog.csdn.net/u014162133/… 【提供了一些可用的直播地址】