Audio Only with Brightcove Player

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

This mode requires the use of a fixed size. You can use a custom aspect ratio and set the height to 80px. Otherwise, the player will not be displayed. See Working with Audio-Only Content for more information.

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.

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

In the editor, add one of the following:

"audio_only_mode": true

OR

"audio_poster_mode": true

Click Save.
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

In Video Cloud Studio, select the Media module and select a video.
Select Publish and embed, and copy the Advanced embed code.

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>