TCPlayer Resolution Configuration Guide

Recent Pages

TCPlayer Resolution Configuration Guide

Last updated: 2024-05-13 17:49:25

During playback, the video resolution can be switched automatically or manually to accommodate different sizes of playback devices and network conditions, thus enhancing viewing experience. This document will explain several scenarios.
Live Streaming
Live streaming videos are played in the form of URLs. When initializing the player, you can specify the URL to be played through the sources field. Alternatively, after initializing the player, you can play by calling the src method on the player instance.
1. Adaptive Bitrate (ABR)
ABR URLs can seamlessly transition during switches without causing interruptions or jumps, ensuring a smooth transition in both visual and auditory experiences. This technology is also relatively simple to use; it passes the playback URL to the player, which will automatically parse the sub-streams and render the resolution switching component on the control bar.
Example 1: Playing HLS ABR URLs
During the player's initialization, when receiving an ABR URL, the player will automatically generate a resolution switching component, so it can switch automatically based on network conditions.
const player = TCPlayer('player-container-id', { // player-container-id is the player's container ID, which must match the one in HTML.
  sources: [{
    src: 'https://hls-abr-url', // hls ABR URL
  }],
});
Note:
Parsing the substreams of an HLS ABR requires the dependency on the MSE API of the playback environment. In browsers not supporting MSE (e.g., Safari on iOS), the browser internally handles this by automatically switching resolutions based on network conditions, but it won't be able to parse multiple resolutions for manual switching.
Example 2: Playing WebRTC ABR URLs
In the WebRTC ABR scenario, when receiving an URL, the player will automatically decompose the substream URLs based on the ABR template in the URL.
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: {
    // Whether to render multiple resolutions; enabled by default; optional
    enableAbr: true,
    // The label name corresponding to the template name; optional
    abrLabels: {
      d1080p: 'FHD',
      d540p: 'HD',
      d360p: 'SD',
      auto: 'AUTO',
    },
  },
});
The following explanations are provided for the parameters in the WebRTC URL:
1. tabr_bitrates specifies the ABR template, and the number of templates will determine the number of rendered resolutions. If no separate resolution label is set, the template name (e.g., d1,080p) will be used as the name of the resolution.
2. tabr_start_bitrate specifies the initial resolution setting.
3. tabr_control sets whether automatic resolution switching is enabled. When the automatic switching is enabled, the player will provide an option for automatic resolution adjustment.
2. Manually Setting Resolution
If the playback URL is not an ABR URL, you can also manually set the resolution. See the following code:
const player = TCPlayer('player-container-id', { // player-container-id is the player's container ID, which must match the one in HTML
  multiResolution:{
    //  Configure multiple resolution URLs
    sources:{
      'SD':[{
        src: 'http://video-sd-url',
      }],
      'HD':[{
        src: 'http://video-hd-url',
      }],
      'FHD':[{
        src: 'http://video-fhd-url',
      }]
    },
    //  Configure the tag for each resolution
    labels:{
      'SD':'Standard Definition','HD':'High Definition','FHD':'Full High Definition'
    },
    //  Configure the order of resolutions in the player component
    showOrder:['SD','HD','FHD'],
    //  Configure the default resolution
    defaultRes: 'SD',
  },
});
VOD
For VOD playback using a fileID, the player signature specifies the type of file to be played (source, transcoded, or ABR) and the substream resolutions of ABR files. For a complete understanding of the VOD playback process, you can refer to the guide Play back an ABR streaming video.
When calculating the player signature, you can set the display names of substreams of different resolutions through the resolutionNames in the contentInfo field. If you leave it blank or fill in an empty array, the default configuration will be used.
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',
}]
The number of substreams during playback depends on the number of substreams converted according to different ABR templates during transcoding. These substreams will fall within the MinEdgeLength range set by resolutionNames based on short-side length and then be displayed with the corresponding Name as the resolution name.
To get a quick start on generating player signatures, you can use the Tencent Cloud VOD console's Player Signature Generation Tools.

Contact Us

Contact our sales team or business advisors to help your business.

Technical Support

Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

7x24 Phone Support

tencent cloud

Recent Pages

TCPlayer Resolution Configuration Guide

Live Streaming

1. Adaptive Bitrate (ABR)

Example 1: Playing HLS ABR URLs

Example 2: Playing WebRTC ABR URLs

2. Manually Setting Resolution

VOD

Was this page helpful?

Was this page helpful?

tencent cloud

Sign Up

Log in

Recent Pages

TCPlayer Resolution Configuration Guide

Live Streaming

1. Adaptive Bitrate (ABR)

Example 1: Playing HLS ABR URLs

Example 2: Playing WebRTC ABR URLs

2. Manually Setting Resolution

VOD

Was this page helpful?

Was this page helpful?