直播 SDK
有奖捉虫：办公协同&微信生态&物联网文档专题 HOT
文档中心 > 直播 SDK > 无 UI 集成方案 > 3. 直播播放 > Web（H5）播放器 > TCPlayerLite 升级指引

TCPlayerLite 升级指引

最近更新时间：2023-09-19 18:43:53

我的收藏

本页目录：

TCPlayerLite 为旧版播放器，仅包含基础直播场景的播放功能，而 TCPlayer 是兼顾直播和点播场景的完整版播放器，包含 TCPlayerLite 全部能力，同时拥有更多更强大的播放以及数据统计等功能。
若您正在使用 TCPlayerLite，建议您升级到 TCPlayer 以享受更多更全面的功能及服务，本文将为您介绍如何从 TCPlayerLite 升级为 TCPlayer。
说明：
TCPlayerLite 仍将持续维护现有能力，您可继续使用，但后续 Web 端播放器功能迭代将主要在 TCPlayer 内进行，TCPlayerLite不再主动做功能迭代。

参见文档

TCPlayer
TCPlayerLite

功能展示

更直观的体验 TCPlayer，可以参见 Web 端播放器体验，可体验 TCPlayer 的各项功能并查看相关代码示例。

操作步骤

1. 替换 SDK 文件

页面引用的样式和 js 文件如下，可以参见 TCPlayer 接入文档，引用最新版本的播放器 sdk 及依赖，或从文档中下载所需文件，自行部署使用。
<!-- 样式文件 -->
<link href="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.1/tcplayer.min.css" rel="stylesheet"/>
  
<!-- 依赖文件，按需使用-->  
<!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 Webrtc 视频，需要在 tcplayer.vx.x.x.min.js 之前引入 TXLivePlayer-x.x.x.min.js。-->
<!--有些浏览器环境不支持 Webrtc，播放器会将 Webrtc 流地址自动转换为 HLS 格式地址，因此快直播场景同样需要引入hls.min.x.xx.xm.js。-->
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.1/libs/TXLivePlayer-1.2.0.min.js"></script>
<!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 HLS 格式的视频，需要在 tcplayer.vx.x.x.min.js 之前引入 hls.min.x.xx.xm.js。-->
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.1/libs/hls.min.0.13.2m.js"></script>
<!--如果需要在现代浏览器中播放 FLV 格式的视频，需要在 tcplayer.vx.x.x.min.js 之前引入 flv.min.x.x.js。-->
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.1/libs/flv.min.1.5.js"></script>

<!--播放器脚本文件-->
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.1/tcplayer.v4.5.1.min.js"></script>

2. 初始化播放器

2.1 在 TCPlayer 中初始化播放器时，可以通过 URL 形式播放，也可以通过 FileID 形式播放。这里对播放 URL 进行举例说明：
2.2 初始化播放器时，可以通过 sources 字段指定所要播放的 URL，或者在初始化播放器之后，调用播放器实例上的 src 方法进行播放。
// 1. 通过 sources 字段播放
var player = TCPlayer('player-container-id',{
  sources: [{
    // 快直播地址
    src: 'webrtc://5664.liveplay.myqcloud.com/live/5664_harchar1?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=6403f7bb'
  }, {
    // HLS直播地址
    src: 'https://5664.liveplay.myqcloud.com/live/5664_harchar1.m3u8?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=6403f7bb'
  }],
  // 可配置参数说明 https://cloud.tencent.com/document/product/881/30820#options-.E5.8F.82.E6.95.B0.E5.88.97.E8.A1.A8
});

// 2. 通过 src 方法播放
player.src(url); // url 播放地址
2.3 如果需要在直播场景设置多清晰度播放，可以参见如下方式：
var player = TCPlayer('player-container-id',{
  multiResolution:{
    sources:{
      'SD':[
        {
          src: 'webrtc://5664.liveplay.myqcloud.com/live/5664_harchar1?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=6403f7bb',
        }
      ],
      'HD':[
        {
          src: 'webrtc://5664.liveplay.myqcloud.com/live/5664_harchar1?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=6403f7bb',
        }
      ],
      'FHD':[
        {
          src: 'webrtc://5664.liveplay.myqcloud.com/live/5664_harchar1?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=6403f7bb',
        }
      ]
    },
    // labels:{
    //   'SD':'标清','HD':'高清','FHD':'超清'
    // },
    showOrder:['SD','HD','FHD'],
    defaultRes: 'SD'
  },
});

3. 事件监听方式

在 TCPlayer 中，监听事件的方式有所区别，所有事件参见 API 文档。
  var player = TCPlayer('player-container-id', options);
  // player.on(type, function);
  player.on('error', function(error) {
    // 做一些处理
  });

中国站