Media Player (audio)

The media player comes with a lot of customization options, which can make it appear quite complicated. However, if you’re not trying to build something too custom and just need a nice-looking player to customize, it’s very quick to get started.

Here’s the quick start guide with how to first get set up and then to customize further if needed..

Minimal Setup

Set your media source – this is the URL of your audio.
Set a title (if needed) – it will be displayed wherever the ‘title’ control is inside the player.

That’s it. Now you have a fully functional media player. All commonly needed controls are in the default UI, with labels and optional tooltips in place. The media is lazyloaded by default.

Customize

Make some customizations to the player and controls..

Changes to the UI – You may prefer to switch a few controls around, maybe change some icons or set the time slider to show the audio waveform.  This can all be done from the ‘Customize UI’ tab. Change the order, add/delete different controls for each zone, and customize each icon/label if needed.
Player styles – The player itself and controls can be styled from the ‘General styling’ tab. Here you can add global styles that will apply to all controls of the same type (styling using a class if you want to apply these styles to multiple players across your site). Change colors, icon sizes, button padding, gaps between the controls, etc. Volume slider, time slider, and captions all have their style options.

Now you have your custom player, styled to fit better with your overall site design.

Optimize

Configure the behavior of the player and add more content..

Load strategy – By default, the player won’t load any media until the media player is scrolled to (lazy loaded). You may want to completely prevent any media loading unless the user interacts with the player. In this case, choose ‘on click’ as the load strategy and set up a local poster image to show where the video would be. The player UI will show, and then as the user clicks the media will load.
Config / Behaviour – Make tweaks to the overall behavior of the player based on the use case.
Add subtitles/captions/chapters – Chapters are great for dividing up the content and allowing users to skim through multiple topics.

Advanced

When you need something more custom..

Custom UI – Sometimes you just need a completely different layout, the custom UI option removes the default UI completely and gives you a blank canvas. Fill the player with media controls and any other elements.
Set up Playlists – If you have multiple videos that you want the user to have access to, an alternative to adding lots of players is to instead set up one player and add a playlist.

Custom UI (advanced)

The built-in UI has enough customisation options to cover most use cases for audio players. Most common UI layouts can be achieved from those settings alone, quite quickly by moving the settings around to where you need them and styling the buttons. All the controls can be customised, styled, change icons, and positioned around the top,center and bottom of the player.

To cover the other use cases, (for users needing create custom UIs) there’s also an option to completely remove the built-in UI and build your own by nesting in active controls, or any elements, where you need them.

For details on adding active controls inside your player layout, see the Media Control element.

Example custom layout, .. (notice the layouts are created using ‘block’ elements using flex/grid. Neither the controls or the player itelf is controlling the layout, it’s all being done with Bricks like any other layout of elements)

The above are just examples, with custom UI the layout/styling would be entirely up to you.

Note that the custom UI should be considered an ‘advanced option’, if you’re just looking for something to add a video to a page and style to match your site, this option is likely overkill. Although it gives maximum flexibility, building a player UI with considerations for all the different device sizes, and player states is no small feat and may take a while to get right if you haven’t done it before.

Adding chapters to media is a great way to split up longer content. After adding chapters, three things in the media player will change.

• The ‘time slider’ control will be divided up into chapters with the chapter title in the tooltip as the user scrubs through the timeline.
• The ‘title’ control will auto-update as the player reaches each chapter time.
• The ‘settings’ control will include any chapters to allow users to skip through each chapter.

There are three ways to add chapters to your media player..

Text Tracks

If you already have a VTT file or SRT, simply add as a new text track as you would if adding subtitles or captions. (more about the WebVTT format)

See example VTT file here

Adding chapters via settings

If you prefer to add the chapter data inside Bricks, head to the ‘chapters’ tab and either in the data for each chapter there.

Query Loop / Dynamic data

Or select the query loop option and set up a query for populating the chapters dynamically with custom fields.

Keyboard Interaction

(To control whether these keys control the player globally, or only when that particular player is focused, go to Media Player > Interaction > Keyboard)

Better support for live stream in the audio player & source URLs that don’t have extensions (live stream URLs) coming in v1.6.1

Stream URLs

Out of the box the player supports HLS, which is common with many streams. The URLs will typically end with .m3u8.

For streaming URLs that don’t include an extension, from BricksExtras v1.6.1 the player now has a new option to set the MIME type: audio/mpeg, audio/ogg, audio/3gp, audio/mp4, audio/webm, audio/flac, audio/object.

Note you may need to adjust the crossorigin setting in the player’s config settings, for streaming from 3rd party sites.

The Player in Live Mode

When setting the stream type from ‘on-demand’ to one of the available live options, certain controls will be hidden out of the box. Take this into account if including both live/on-demand URLs in a playlist, as the UI will need to adapt for the different content type.

Controls in live mode..

Time control – Will just be outputting live/live so is hidden whenever live streaming is detected.

Download control – Will be hidden by default unless the source is not a live stream.

Time Slider / Waveform – For live streams, a waveform can’t be created so this would be hidden if this option is selected and replaced with a time slider. The time slider will be in ‘live mode’ meaning the user can’t scrub forward/back unless the live stream supports it.

Live Button – This little ‘live alert button’ will appear only when in a live stream. It will show it’s on edge when the user is listening to very up to date part of the stream. If the stream supports scrubbing backwards (so the user is no longer listening to the very latest) then it will show a different styling, and clicking the button will bring the user ‘back to the edge’.

Note that ‘Element Interactions’ must be enabled in BricksExtras > Misc settings.

This element adds new triggers to Bricks’ interactions options, so you can trigger actions based on the state of the element.

Triggers

Started  – Triggered the moment the media is first played.
Ended – Triggered when the media reaches the end.
Paused – Triggered when user pauses the player.
Resumed – Triggered when user resumes playback after the player had been paused.
Seeked to new time – Triggered when user finishes using the time slider to seek to a new time.
Time reaches x from start – Triggered the first time the media reaches x from the start. (x can be a fixed time in min/sec or a percentage of the duration)
Time reaches x from end – Triggered the first time the media reaches x from the end. (x can be fixed time in min/sec or a percentage of the duration)
Watch time has reached x – Triggered after the user has played at least x (x can be fixed time in min/sec or a percentage of the duration).

Options

Time measurement – For the time based triggers, it allows you to choose between a fixed time (in minuted/seconds) or a percentage based time (ie 5% from the end of the media)

– True – Will trigger the action (useful if you’re using a trigger to display something within the player or to control the player)
– False – Will disable the action if currently in fullscreen mode.
– Wait – Will wait until the user has finished in fullscreen mode and then run any action that was set up.
– Force Exit – When it triggers, it will force the video out of fullscreen mode and run the action.

Trigger Delay (ms) – Allows you to set a short delay between the actions.

Actions

The element can be controlled with interactions.

• Set the target to the element using a CSS selector
• Use one of the following functions below to set the action.

(always add the %brx% as the argument, which is required for Bricks interactions whenever using the JS action)

bricksextras.mediaplayer.play – Start playback
bricksextras.mediaplayer.pause – Pause playback
bricksextras.mediaplayer.toggleplay – Toggle between play/pause
bricksextras.mediaplayer.togglemute – Mute or disable mute
bricksextras.mediaplayer.skip – Skips the media to the new time (second parameter for seconds)
bricksextras.mediaplayer.load – Ideal if using custom loading strategy on the player. Will load the media for any players matching the given selector. Add a second parameter to ‘true’ if you wish for this to be remembered in the browser local storage, so on next page load the media will automatically load. The main use case is that you need the user to agree to something, so they click to load the players. When the same visit returns, ideally you don’t want them to have to click again.