Core UI and Core Animator were just released!

Brickscore / Elements / 
Media

Media

Core element

Documentation

Media element is an integration of vidstack library, the most versatile, customizable and fastest media player out there.

Settings

Source

There are three available source types: Wordpress media library, file URL or dynamic data.

Stream type

on-demand: Video on Demand (VOD) content is pre-recorded and can be accessed and played at any time. VOD streams allow viewers to control playback, pause, rewind, and fast forward.

live: Live streaming delivers real-time content as it happens. Viewers join the stream and watch the content as it’s being broadcast, with limited control over playback.
live:dvr: Live DVR (Live Digital Video Recording) combines the features of both live and VOD. Viewers can join a live stream and simultaneously pause, rewind, and fast forward, offering more flexibility in watching live events.
ll-live: A live streaming mode optimized for reduced latency, providing a near-real-time viewing experience with minimal delay between the live event and the viewer.
ll-live:dvr: Similar to low-latency live, this mode enables viewers to experience live content with minimal delay while enjoying the benefits of DVR features (same as live:dvr).

Inline

You are able to set the following video standards: title (for aria-label), muted, autoplay, playsinline, loop and hide controls on mouse leave.

Save data on user's browser

Enables saving data locally on the user’s browser. This is a simple and fast option for remembering player settings, but it won’t persist across domains, devices, or browsers.

Time

Playback rate

Defines video speed. e.g: 0.5 slow down to 50% of the normal speed.

Clip start time & Clip end time

Allows shortening the media by specifying the time at which playback should start and end.

Loading

eager: Load media immediately - use when media needs to be interactive as soon as possible.

visible: Load media once it has entered the visual viewport - use when media is below the fold and you prefer delaying loading until it’s required.
play: Load the provider and media on play - use when you want to delay loading until interaction.

Thumbnails

Here you can set the thumbnails file for your video. It must have .vtt extension.

Poster

A poster is used as the thumbnail for your video before playing it. It has to be passed by URL or from your Wordpress media library.

Poster load

eager: poster will be loaded immediately.

visible: poster will delay loading until the provider has entered the viewport.

Sources

Use the sources repeater to provide video qualities/resolutions using multiple video files with different sizes (e.g: 1080p, 720p, 480p).

Accesibility

At this section you can set custom shortcuts at pleasure for your video. This include: Toggle paused, toggle muted, toggle fullscreen, toggle picture in picture, toggle captions, seek backward, seek forward, volume up, volume down, speed up and slow down.

Style

There are plenty of controls to customize each of your video components, including dimensions, typography, colors, animations and more at the following UI components: Buttons, Menu settings, Time, Thumbnails, Live, Tooltip, Buffering and the root element itself.

Introduction
Text elementsButton elementsMenu elementsCore elementsFeatures
Need assistance?
*Please feel free to reach us and we will kindly instruct you on the behaviour of any element. You can also reach our community group or take a look at our tutorials.
Don´t miss anything. Join us & build betterJoin Brickscore Community Updates

No spam. Only Brickscore news and showcases

Brickscore 
© 2024 Brickscore. All rights reserved.