tencent cloud

All product documents
Video on Demand
DocumentationVideo on DemandPlayer SDKIntegration (No UI)Web IntegrationTCPlayer Resolution Configuration Guide
TCPlayer Resolution Configuration Guide
Download PDF
Last updated: 2024-04-11 16:50:03
TCPlayer Resolution Configuration Guide
Last updated: 2024-04-11 16:50:03
Download PDF
During playback, you can switch the video resolution automatically or manually to accommodate different sizes of playback devices and network conditions, thus enhancing the viewing experience. This article 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)

Adaptive bitrate 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; you just need to pass 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 adaptive bitrate URLs

During the player's initialization, when an adaptive bitrate URL is passed in, the player will automatically generate a resolution switching component and 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 adaptive bitrate URL
  }],
});
Note:
Parsing the substreams of an HLS adaptive bitrate 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 adaptive bitrate URLs

In the WebRTC adaptive bitrate scenario, after the address is input, the player will automatically decompose the substream addresses based on the ABR template in the address.
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 switch, 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., d1080p) 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. Once enabled, the player will render an option for automatic resolution.

2. Manually setting the resolution

If the playback URL is not an adaptive bitrate 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 selected resolution
    defaultRes: 'SD',
  },
});

VOD Scenario

In the VOD scenario, if you play via fileID, which type of file to play (source file, transcoded file, adaptive bitrate file) and the resolution of substreams of the adaptive bitrate file are all set in the player signature. You can refer to the guide Play back an adaptive bitrate streaming video to understand the entire process of playing videos in the VOD scenario.
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 is 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 adaptive bitrate 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 clarity name.
If you need to quickly experience generating the player signature, you can use the Tencent Video on Demand console's Player Signature Generation Tool.
Was this page helpful?
You can also Contact Sales or Submit a Ticket for help.
Yes
No

Feedback

Contact Us

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

Contact Us
Technical Support

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

Submit a Ticket
7x24 Phone Support
Hong Kong, China
+852 800 906 020 (Toll Free)
United States
+1 844 606 0804 (Toll Free)
United Kingdom
+44 808 196 4551 (Toll Free)
Canada
+1 888 605 7930 (Toll Free)
Australia
+61 1300 986 386 (Toll Free)
EdgeOne hotline
+852 300 80699
More local hotlines coming soon