Audio Only with Brightcove Player

In this topic, you will learn how to use Brightcove Player with audio-only assets.


Brightcove Player supports playback of audio-only assets either with the player UI hidden except for the control bar, or with the poster image permanently displayed during playback

Audio only mode

Audio-only mode
Audio only mode

Audio poster mode

Audio-poster mode
Audio poster mode


This example shows an audio asset with Brightcove Player configured for audio poster mode. Here, the poster image is displayed in the player during playback.

See the Pen Untitled by Brightcove Learning Services (@rcrooks1969) on CodePen.

Using the CodePen

Here are some tips to effectively use the above CodePen:

  • Toggle the actual display of the player by clicking the Result button.
  • Click the HTML/CSS/JS buttons to display ONE of the code types.
  • Click the EDIT ON CODEPEN button in the CodePen and have the code available in one browser/browser tab.
    • In CodePen, adjust what code you want displayed. You can change the width of different code sections within CodePen.


The following requirements are needed for this feature:

  • Brightcove Player v6.65.1 and newer

Implementation notes

When using audio assets with Brightcove Player, there are two options to customize the player:

  • Audio Only Mode
  • Audio Poster Mode

Both modes cannot be enabled at the same time.

  • If both audio_only_mode and audio_poster_mode are set to true in the player configuration, Audio Only Mode will take precedence.
  • Enabling one mode programmatically via player.audioOnlyMode(true) or player.audioPosterMode(true) will disable the other mode if it is enabled.

Audio Only Mode

In this mode, all player UI is hidden except for the control bar.

Audio Poster Mode

In this mode, the poster image is permanently displayed during playback. The player dimensions remain the same as a video player in this mode.

Implement using configuration

Audio playback mode can be set in the player configuration.

  1. In Video Cloud Studio, select the Players module and then JSON Editor.

    Player configuration JSON
  2. In the editor, add one of the following:

    "audio_only_mode": true


    "audio_poster_mode": true

    Audio only code
  3. Click Save.
  4. Publish your player changes.

Implement using embed code

Another option to implement audio mode is to update the player embed code on your web page.

Enable/disable audio mode

Audio mode can be enabled or disabled asynchronously by calling the following methods which return a Promise.




Check audio mode state

When called without arguments, these methods return a Boolean value indicating the current audio mode state.





  1. In Video Cloud Studio, select the Media module and select a video.

  2. Select Publish and embed, and copy the Advanced embed code.

  3. Here is an example using the Advanced Embed implementation to set the audio mode for the player.

    <div style="max-width: 960px;">
      <video-js id="myPlayerID"
        data-account="your account ID"
        data-player="your player ID"
        data-video-id="your video ID"
    <script src=" account ID/your player ID_default/index.min.js"></script>
    <!-- custom script -->
      videojs.getPlayer('myPlayerID').ready(function() {
        var myPlayer = this;
        // Set either audio only mode OR audio poster mode
        // myPlayer.audioPosterMode(true);