如何通过编程方式设置Brightcove播放器的视频画质/码率版本？

Hey there! I’ve spent a lot of time working with Brightcove Player integrations, so let’s break down how to solve this problem step by step.

Key Prerequisite #

First, make sure you’re using Brightcove Player v6 or later—the quality control API is well-supported here, and older versions might have limited functionality.

Method 1: Set Preferred Quality Before Video Loads #

You can define a preferred quality level when initializing the player, or right after the video metadata loads.

Option A: Initialize with Preferred Quality #

When setting up the player, pass a playback.preferredQuality parameter to specify your desired resolution or bitrate:

// Initialize player with preferred 720p quality
var myPlayer = bc('my-player-container', {
  playback: {
    preferredQuality: '720p' // Can also use a bitrate value like 2500000 (2.5Mbps)
  }
});

Option B: Set Quality After Metadata Loads #

Wait for the loadedmetadata event to ensure all quality levels are available, then select your target:

var myPlayer = bc('my-player-container');

myPlayer.on('loadedmetadata', function() {
  // Get all available quality levels
  const qualityLevels = myPlayer.qualityLevels();
  
  // Example 1: Pick the highest bitrate version
  const highestBitrateLevel = qualityLevels.reduce((prev, curr) => 
    prev.bitrate > curr.bitrate ? prev : curr
  );
  myPlayer.currentQuality(highestBitrateLevel.id);

  // Example 2: Pick a specific resolution (e.g., 1080p)
  const targetLevel = qualityLevels.find(level => level.height === 1080);
  if (targetLevel) {
    myPlayer.currentQuality(targetLevel.id);
  } else {
    console.log('1080p quality not available for this video');
  }
});

Method 2: Switch Quality During Playback #

If you want users to manually toggle quality (or trigger it via your app logic), add a handler to switch levels on demand:

// Example: Button to switch to 480p
document.getElementById('switch-to-480p').addEventListener('click', () => {
  const myPlayer = bc('my-player-container');
  const qualityLevels = myPlayer.qualityLevels();
  
  const targetLevel = qualityLevels.find(level => level.height === 480);
  if (targetLevel) {
    myPlayer.currentQuality(targetLevel.id);
    alert('Switched to 480p');
  } else {
    alert('480p is not available for this video');
  }
});

Handling Iframe-Embedded Players #

If your player is embedded in an iframe, you’ll need to use postMessage to communicate between the parent page and the iframe:

Parent Page Code #

const brightcoveIframe = document.getElementById('brightcove-player-iframe');

// Send a message to switch quality
brightcoveIframe.contentWindow.postMessage({
  type: 'SWITCH_QUALITY',
  targetHeight: 720
}, '*');

Iframe Page Code #

// Listen for messages from the parent
window.addEventListener('message', (event) => {
  if (event.data.type === 'SWITCH_QUALITY') {
    const myPlayer = bc('player-in-iframe');
    const qualityLevels = myPlayer.qualityLevels();
    const targetLevel = qualityLevels.find(level => level.height === event.data.targetHeight);
    
    if (targetLevel) {
      myPlayer.currentQuality(targetLevel.id);
    }
  }
});

Important Notes #

• Always check if the target quality level exists before trying to switch—some videos may not have all resolutions/bitrates available.
• The qualityLevels() method returns objects with properties like id, bitrate, height, width, and label (e.g., "720p")—use these to filter your target.
• If you’re using Brightcove’s Player Manager, the API calls are mostly the same, but double-check for any edge cases specific to your setup.

内容的提问来源于stack exchange，提问作者Vikas Bansal