Multiple Audio Tracks

Introduction

Brightcove Player supports video with multiple alternate audio tracks. If the video is prepared with multiple alternate audio tracks a special headphone icon () automatically appears in the controlbar. Again, if you have a properly encoded video, the icon will appear, there is nothing else you need to do. Once the icon is clicked, the viewer of the video can select between audio tracks.

Example

Once you click play, you will see the headphone icon in the controlbar from which you can select between two alternative audio tracks.

Use cases

Here are some common use cases for multiple alternative audio tracks:

• Multiple language support
• Stereo versus multi-channel (surround sound) audio
• Commentary track
• Descriptive audio

Understanding multiple audio tracks

Multiple audio tracks can be added to videos using the Media module or by using the APIs. Here are some helpful links on multiple alternate audio tracks:

• HTML Standards
• Guidance from Apple
• Apple's HLS Information

Styling icon and menu

If the default colors do not meet your needs, you can change the color of the headphone icon, the selected option and others options. The following table and screenshot detail the selectors you will need to use. (Note that the colors shown in the screenshot are NOT the defaults, but colors to easily identify.)

The following is the actual CSS that affected the changes in the screenshot:

.video-js .vjs-control-bar .vjs-audio-button {
  color: red;
}
.video-js .vjs-control-bar .vjs-audio-button .vjs-menu-item.vjs-selected {
  background-color: yellow;
}
.video-js .vjs-control-bar .vjs-audio-button .vjs-menu-item {
  background-color: green;
}

Known issues

• If you add an HLS (m3u8) remote rendition via a <source> tag in the player, viewers will not be able to select multiple audio tracks in Chrome on the Android OS.