Media Player

Out of the box the player comes with a nice, minimalistic UI with the common controls. This can all be customised.

In video mode, the player UI is divided into two main ‘zones’, positioned at the top and the bottom of the player. There’s also center for adding play/pause button and an optional full width time-slider above the bottom controls (optional because you can also include a time slider as one of the controls inside the other zones).

The player controls (see full list below) can be added/removed/re-ordered from the top and bottom to create your layout. These controls will fade away once the user starts watching the video.

Adaptive Layout

This UI output can dynamically change depending on the width, either of the player itself (like a container query) or the viewort (like a media query) and output a new UI.

For example, instead of just trying to fit the desktop layout into mobile by changing the spacing, we can instead adjust the UI completely to better suit the smaller space. This is useful for both mobile devices or if the video player is inside some type of grid, where sometimes the media player may need to fit into a tighter space on some devices.

Container Query

To better highlight the difference between the container query option and the media query that you may be more familiar with, see the below image.

Notice that the video players in the grid on the right are using the small UI layout, even on desktop view, because they are contained into a smaller space due to the grid layout. This is exactly the same player inside of a loop, just adapting based on it’s own size. Just choose the breakpoint for the width where you’d want the smaller UI to kick in.

Player Controls

‘play’ – 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
‘mute’ – Toggle mute – with an optional volume slider.
‘captions’ – Toggle captions on/off (if they exist)
‘settings’ – Settings menu with speed and chapters (if they exist)
‘pip’ – Picture-in-picture (video only)
‘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.

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

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.

The important thing to be mindful of with chapters, because you’re dividing up the content into sections, the last cue end time added must correlate with the end of the video.

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)

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)