Media Player

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 video. If using a CDN to host the media (like Bunny stream, or Cloudflare Stream use the HLS URL ending with .m3u8)
Set a title (if needed) – it will be displayed wherever the ‘title’ control is inside the player (at the top by default).

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. Any external connections to third party are 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 add a large play button in the center. Maybe add some ‘skip forward’, ‘skip back’ buttons.  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 and the image will show, and then as the user clicks the media will load. (note if using traditional iframe providers on some browsers this will mean the user will need to click again to then play the player after the media has loaded due to play restrictions – iOS specifically)
Config / Behaviour – Make tweaks to the overall behavior of the player based on the use case. Choose to pause the video when out of view, aspect ratio, how long the controls take to hide after the user starts watching etc..
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.

Out of the box, the built-in UI comes with two nice, minimalistic layouts with the common controls. These can all be customised, repositioned, use custom icons, etc.

The UI is divided into three ‘zones’, positioned at the top, center and bottom of the player. There’s also optional full width time-slider below the bottom controls for Layout 1, and below the controls for the Layout 2 (optional because you can also include a time slider as one of the controls inside any of the other zones).

The player controls (see full list below) can be added/removed/re-ordered to create your layout. These controls will fade away once the user starts watching the video. Note that some of these controls are conditional and will only be visible based on if they are available for the current media being played.

Layout 1

Minimalist layout.

Default Controls:
Top zone – volume, full screen & settings menu.
Middle zone – large play button.
Bottom Zone – media title and full-width time slider below.

Layout 2

YouTube-esque type layout with controls underneath the time slider.

Default controls:
Top zone – media title.
Middle zone – none.
Bottom Zone – play, volume, time, fullscreen, settings menu with full-width time slider above.

Audio Player

When the media player is set to audio player, it has the same customisation options and controls, but just starts with a slightly different default configuration more suited to audio (see image below). The same three zones top/center/button are available for being able to stack layers of controls on top of each other if needed (custom nestable UI also supported)

Default controls:
Top zone – none.
Middle zone – none.
Bottom Zone – seek backward, play, seek forward, volume, time, settings menu with full-width time slider above.

Control Visibility

Each zone and each control comes with some visibility options to allow for customising the player UI based on the current state of the player. ie if the player has loaded the media, or if the player has been played.

For example, if choosing not to load the media until a user actually clicks the player (via the loading settings), you may wish to only reveal part of the UI until the player has been clicked and the media has been loaded in..

Player Control Types

Note that any controls with an asterisk next to their name in the dropdown are displayed conditionally. For example, if there are no chapters for the current video in the player, neither the chapter menu button nor the chapter title elements will appear.

‘Play’ – Play/pause playback
‘Play (Large)’ – A larger play/pause playback
‘Seek-forward’ – Fast forward by the seek time (default 10 seconds)
‘Seek-backward’ – Rewind by the seek time (default 10 seconds)
‘Time slider’ – The progress bar and scrubber for playback and buffering
‘Time’ – For showing the current time of playback & The full duration of the media
‘Title *’ – The title of the current media, either coming from the title settings or dynamically from the video source.
‘Mute’ – Toggle mute – with an optional volume slider.
‘Captions *’ – Toggle captions on/off (if they exist)
‘Chapter Menu *’ – Open up the chapter menu
‘Chapters Title *’ – Display the current chapter (will change as the media goes through different chapters)
‘Settings’ – Settings menu with conditional options for speed, audio, quality, accessibility options
‘Fullscreen *’ – Toggle fullscreen (video only)
‘Spacer’ – The spacer control is to easily add the gap between the controls to allow for, for quickly aligning left/right.
‘Custom text’ – Add your own text
‘Image’ – Add your own image (ideal for if needing to add branding to the UI)
‘Poster image *’ – Display poster image for current media
‘Previous item’ – Button to skip to the previous item in the playlist
‘Next item’ – Button to skip to the next item in the playlist

Each control has it’s own individual settings and can be arranged in any order within the UI zones.

Icons

All the icons can be changed to use your own custom icons from Bricks. If you like the default UI style, and want to find more icons with that same style you can find the icon pack here that we’re using, where SVGs are available for download.

Settings Menu Control

The ‘settings’ control (with the default cog icon) opens up a list of settings when clicked that will be unique to the current media in the player.

These menu items are added dynamically as they become available, depending on the media playing. For example, if there are no chapters or captions, these menu items won’t be added.

Custom UI (advanced)

The built-in UI has enough customisation options to cover most use cases for video 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.

As with the controls built into the player, these can be customised, styled, icons changed, tooltips added etc. The main difference here is that you’re in 100% control of the inner layout using the Bricks flex/grid and whatever custom positioning & styling you need for each indivdual part.

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.

Thumbnails – If hosting your videos with a provider that creates preview thumbnails (such as Mux), enter the VTT  file or story board JSON to display preview thumbnails.

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)

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 video)

Allow action if player in fullscreen? – Choose whether to trigger the action when the user is currently watching in fullscreen (ie isn’t viewing the browser window)

– 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.enterfullscreen – Enter full screen mode (if supported)
bricksextras.mediaplayer.exitfullscreen – Exit full screen mode (if supported)
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.