播放器 SDK TCPlayer 清晰度配置说明-含 UI 的集成方案-文档中心-腾讯云

﻿
﻿
﻿
在播放过程中，您可以通过自动或手动切换视频清晰度，以适应不同尺寸的播放设备和网络环境，从而提高观看体验。本文将从以下几个场景进行说明。
直播场景
直播场景以 URL 的形式来播放视频，初始化播放器时，可以通过 sources 字段指定所要播放的 URL。或者在初始化播放器之后，调用播放器实例上的 src 方法进行播放。
1. 自适应码率（ABR）
自适应码率地址在切换时可以做到无缝衔接，切换过程不会出现中断或跳变，实现了观感和听感的平滑过渡。使用该技术也比较简单，仅需将播放地址传给播放器，播放器会自动解析子流，并将清晰度切换组件渲染到控制条上。
示例1: 播放 HLS 自适应码率地址
在初始化播放器时，传入自适应码率地址，播放器将自动生成清晰度切换组件，并会根据网络状况进行自动切换。
const player = TCPlayer('player-container-id', { // player-container-id 为播放器容器ID，必须与html中一致
  sources: [{
    src: 'https://hls-abr-url', // hls 自适应码率地址
  }],
});
注意：
解析 HLS 自适应码率的子流，需要依赖播放环境的 MSE API。在不支持 MSE 的浏览器环境（例如 iOS 的 Safari 浏览器），会由浏览器内部处理，根据网络情况自动切换清晰度，但无法解析出多种清晰度来供您手动切换。
示例2：播放 WebRTC 自适应码率地址
在 WebRTC 自适应码率场景，传入地址后，播放器会根据地址中的 ABR 模板自动拆解子流地址。
const player = TCPlayer('player-container-id',{
  sources: [{
    src: 'webrtc://global-lebtest-play.myqcloud.com/live/lebtest?txSecret=f22a813b284137ed10d3259a7b5c224b&txTime=69f1eb8c&tabr_bitrates=d1080p,d540p,d360p&tabr_start_bitrate=d1080p&tabr_control=auto'
  }],
﻿
  webrtcConfig: {
    // 是否渲染多清晰度的开关，默认开启，可选
    enableAbr: true,
    // 模板名对应的label名，可选
    abrLabels: {
      d1080p: 'FHD',
      d540p: 'HD',
      d360p: 'SD',
      auto: 'AUTO',
    },
  },
});
这里对 WebRTC 地址中的参数做以下说明：
1. tabr_bitrates 指定了 ABR 模板，有几个模板就会渲染出几个清晰度。如果没有单独设置清晰度的 label，模板名称（如 d1080p）将被设为清晰度名称。
2. tabr_start_bitrate 指定了起播的清晰度规格。
3. tabr_control 设置是否开启自动切换清晰度。开启后，播放器会单独渲染出自动清晰度选项。
2. 手动设置清晰度
如果播放地址不是自适应码率地址，也可以手动设置清晰度。参见如下代码：
const player = TCPlayer('player-container-id', { // player-container-id 为播放器容器ID，必须与html中一致
  multiResolution:{
    // 配置多个清晰度地址
    sources:{
      'SD':[{
        src: 'http://video-sd-url',
      }],
      'HD':[{
        src: 'http://video-hd-url',
      }],
      'FHD':[{
        src: 'http://video-fhd-url',
      }]
    },
    // 配置每个清晰度标签
    labels:{
      'SD':'标清','HD':'高清','FHD':'超清'
    },
    // 配置各清晰度在播放器组件上的顺序
    showOrder:['SD','HD','FHD'],
    // 配置默认选中的清晰度
    defaultRes: 'SD',
  },
});
点播场景
在点播场景下，如果通过 fileID 播放，播放哪种规格的文件（原始文件、转码文件、自适应码率文件）以及自适应码率文件子流的清晰度，都是在播放器签名中设置的。您可以参见指引 播放自适应码流视频，以便于您了解点播场景下播放视频的整个流程。
计算播放器签名时，可以通过 contentInfo 字段中的 resolutionNames 来设定不同分辨率的子流的展示名字。不填或者填空数组则使用默认配置。
resolutionNames: [{
  MinEdgeLength: 240,
  Name: '240P',
}, {
  MinEdgeLength: 480,
  Name: '480P',
}, {
  MinEdgeLength: 720,
  Name: '720P',
}, {
  MinEdgeLength: 1080,
  Name: '1080P',
}, {
  MinEdgeLength: 1440,
  Name: '2K',
}, {
  MinEdgeLength: 2160,
  Name: '4K',
}, {
  MinEdgeLength: 4320,
  Name: '8K',
}]
播放时的子流数量取决于转码时根据不同的自适应码率模板转换出的子流数。这些子流会依据短边长度落在由 resolutionNames 设定的哪个 MinEdgeLength 范围，再以对应的 Name 作为清晰度名称进行展示。
若您需要快速体验生成播放器签名，可以使用腾讯云点播控制台的 播放器签名生成工具。
TCPlayer 清晰度配置说明

本页目录：

直播场景

1. 自适应码率（ABR）

示例1: 播放 HLS 自适应码率地址

示例2：播放 WebRTC 自适应码率地址

2. 手动设置清晰度

点播场景
