Multiple Audio Tracks

Product(s)
Video Cloud
Brightcove Player
Role(s)
Player Developer
Topic(s)
Audio

This topic explains how multiple audio tracks are handled in the Brightcove Player.

Introduction

Brightcove Player supports video with multiple alternate audio tracks. If the video is prepared with multiple alternate audio tracks a special headphone icon (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:

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.)

Selectors for audio icon
Element Selector
Headphone icon (red in screenshot) .video-js .vjs-control-bar .vjs-audio-button
Selected option (yellow in screenshot) .video-js .vjs-control-bar .vjs-audio-button .vjs-menu-item.vjs-selected
Available option(s) (green in screenshot) .video-js .vjs-control-bar .vjs-audio-button .vjs-menu-item
selectors
Icon and menu selectors

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;
}