Media

Media element is an integration of vidstack library, the most versatile, customizable and fastest media player out there.
Media element extends Bricks video element with many more controls, styles and possibilities. You can even include live videos on stream!

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.
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.

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.

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

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: there are 2 possibilities here:
– eager: poster will be loaded immediately.
– visible: poster will delay loading until the provider has entered the viewport.

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

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.

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.

– Tamu