Contact Support | System Status
Page Contents

    Brightcove Player Sample: Audio Player Simulated

    In this topic, you will learn to create a minimalist Brightcove Player designed for audio-only playback. The aim is to create a player that looks like an audio player.

    Development sequence

    Here is the recommended development sequence:

    1. Use the In-Page embed player implementation to test the functionality of your player, plugin and CSS (if CSS is needed)
    2. Put the plugin's JavaScript and CSS into separate files for local testing
    3. Deploy the plugin code and CSS to your server once you have worked out any errors
    4. Use Studio to add the plugin and CSS to your player
    5. Replace the In-Page embed player implementation if you determine that the iframe implementation is a better fit (detailed in next section)

    For details about these steps, review the Step-by-Step: Plugin Development guide.

    iframe or In-Page embed

    When developing enhancements for the Brightcove Player you will need to decide if the code is a best fit for the iframe or In-Page embed implementation. The best practice recommendation is to build a plugin for use with an iframe implementation. The advantages of using the iframe player are:

    • No collisions with existing JavaScript and/or CSS
    • Automatically responsive
    • The iframe eases use in social media apps (or whenever the video will need to "travel" into other apps)

    Although integrating the In-Page embed player can be more complex, there are times when you will plan your code around that implementation. To generalize, this approach is best when the containing page needs to communicate to the player. Specifically, here are some examples:

    • Code in the containing page needs to listen for and act on player events
    • The player uses styles from the containing page
    • The iframe will cause app logic to fail, like a redirect from the containing page

    Even if your final implementation does not use the iframe code, you can still use the In-Page embed code with a plugin for your JavaScript and a separate file for your CSS. This encapsulates your logic so that you can easily use it in multiple players.

    Select implementation

    Although the player described here will work in an iframe embed, there is some CSS applied to the player to round the corners and keep the controls visible. This styling depends on the player having an ID and will only work with the in-page embed. The in-page embed is used here.

    The player

    The sample player is in the JSFiddle below. Click the CSS tab to see the CSS applied to the player.

    How it works

    The following sections explain the player and CSS code used in the example.

    This player also requires audio-only content. See Audio Content to learn how to add audio content to Video Cloud.

    This player also requires audio-only content in the form of a MP4 file with no video track. A poster for the audio is optional, but can be used to display the audio title, as shown in the sample player here.

    Create the player

    To create a player and assign a video to it, follow these steps:

    1. In the Players module, create a new player or use an existing one.
    2. Edit the player settings to change the size:
      • Choose a fixed size
      • Choose a custom aspect ratio
      • Set the width to whatever you like, but set the height to 80 pixels
      Player sizing
      Player sizing
    3. In the Media module, select an audio-only item and publish it with this player.Assign audio-only content to the player and publish it.
    4. Copy the In-Page embed code and paste it into a new HTML file.
    5. Add the id audioOnly to the player.

    The embed code should look similar to this:

    <video-js id="audioOnly" data-video-id="4841158458001" data-account="1752604059001" data-player="rkgpS9K" data-embed="default" class="video-js" controls style="width: 480px; height: 80px;"></video-js>
    <script src=""\></script>
    <video-js id="audioOnly" data-account="3676484086001" data-player="B1doF3j" data-embed="default" class="video-js" controls style="width: 480px; height: 80px;"></video-js>
    <script src=""></script>

    Add custom CSS

    Now add some custom CSS in a style block in the head section of the page. The styles will do three things:

    • Remove the background on the big play button (because it's too large for the height of the player)
    • Keep the control bar visible during playback even if the user mouses off
    • Round the corners of the player to make it look a little more audio-player-like

    The CSS code you need to add is shown below:

    /* keep the controls visible during playback */
    #audioOnly .vjs-control-bar {
        transform: none;
        background-color: transparent;
    /* round the corners of the player */
    #audioOnly {
        border-radius: 1em;
        width: 480px;
        height: 80px;
    /* remove the background from the big play button */
    .video-js.vjs-mouse .vjs-big-play-button {
        background: none;
    /* round the corners of the dock */
    #audioOnly .vjs-dock-text {
        border-radius: 1em 1em 0 0;

    Page last updated on 15 Jun 2021