Product Updates | Contact Support | System Status
Page Contents

    Audio Only with Brightcove Player

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

    Introduction

    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

    Example

    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.

    Requirements

    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

      OR

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

    player.audioOnlyMode(true|false)

    OR

    player.audioPosterMode(true|false)

    Check audio mode state

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

    player.audioOnlyMode()

    OR

    player.audioPosterMode()

    Steps

    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-embed="default"
          controls=""
          data-video-id="your video ID"
          data-playlist-id=""
          data-application-id=""
          class="vjs-fluid">
        </video-js>
      </div>
      <script src="https://players.brightcove.net/your account ID/your player ID_default/index.min.js"></script>
      
      <!-- custom script -->
      <script>
        videojs.getPlayer('myPlayerID').ready(function() {
          var myPlayer = this;
      
          // Set either audio only mode OR audio poster mode
          myPlayer.audioOnlyMode(true);
          // myPlayer.audioPosterMode(true);
        });
      </script>

    Page last updated on 25 Apr 2022