support Contact Support | system status System Status
Page Contents

    Multiple Audio Tracks

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

    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 Andriod OS.

    Page last updated on 21 Jul 2020