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:

Use the In-Page embed player implementation to test the functionality of your player, plugin and CSS (if CSS is needed)
Put the plugin's JavaScript and CSS into separate files for local testing
Deploy the plugin code and CSS to your server once you have worked out any errors
Use Studio to add the plugin and CSS to your player
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:

In the Players module, create a new player or use an existing one.
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
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.
Copy the In-Page embed code and paste it into a new HTML file.
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="https://players.brightcove.net/1752604059001/rkgpS9K_default/index.min.js"\></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="https://players.brightcove.net/3676484086001/B1doF3j_default/index.min.js"></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 playbutton (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;
}