Video Player

The Avonni Video Player component lets you embed and play videos directly within your App & Record Pages. It supports hosted file URLs, YouTube, Vimeo, and Salesforce Files, with options to control playback behavior, volume, and appearance.

Overview

Use the Video Player whenever you need to surface video content inline on a page — product demos, training clips, welcome messages, or any media tied to a record. You can connect the source dynamically so it changes based on the record in context.

For Vimeo videos, add https://vimeo.com and https://*.vimeo.com to your Salesforce Trusted URLs (Setup > Security > Trusted URLs) and enable all CSP directives. This is a Salesforce security requirement.

Configuration

To configure the Video Player, select it on the canvas. The configuration panel opens on the right. The sections below mirror the properties from top to bottom.

Properties

Source

The video to display. Accepts a direct file URL (MP4, OGG, WebM), a Salesforce Content Document ID, a YouTube video ID, or a Vimeo video URL.

Autoplay

If enabled, the video starts playing automatically when the component loads. Autoplayed videos are initially muted — users must unmute manually.

Volume

Sets the initial volume level of the player (0–100). Requires: Autoplay to be disabled.

Hide Controls

If enabled, the standard player controls (play/pause, volume, fullscreen) are hidden. Useful for background videos or purely decorative media.

Loop

If enabled, the video restarts from the beginning when it reaches the end.

Playback Rate

Controls the playback speed of the video. Common values: 0.5 (half speed), 1 (normal), 2 (double speed).

Placeholder

Show Placeholder

If enabled, a placeholder is displayed when no source is set.

Placeholder Message

The message shown below the placeholder illustration when the source is empty. Requires: Show Placeholder to be enabled.

Placeholder Illustration

The illustration shown when no source is loaded. Defaults to No Preview. Requires: Show Placeholder to be enabled.

Set Component Visibility

All components support conditional visibility — see Component Visibility.

Output Variables

The Video Player exposes these output variables you can reference elsewhere on the page after the user interacts with it.

Playback State

These variables update continuously as the video plays.

Output variable	Type	What it returns
Current Time Stamp	Number	The current playback position in seconds.
Duration	Number	The total length of the loaded video in seconds.

Example: Use Current Time Stamp and Duration together to build a progress formula — for example, currentTimeStamp / duration * 100 — and display it in a text component beside the player.