Video Player

The Avonni Video Player provides configurable video playback options for controlling the source, playback behavior, volume, and visual styling.

The Avonni Video Player component allows you to embed and play videos directly within your Dynamic Components. It supports various video sources (direct URLs, YouTube, Vimeo, and Salesforce Files) and offers extensive configuration options for controlling playback, appearance, and behavior.

Overview

The Video Player component provides a user-friendly way to integrate video content into your App & Record Pages. Key features include:

• Multiple Source Options: Play videos from direct URLs (MP4, etc.), YouTube, Vimeo, or Salesforce Files.

• Playback Control: Configure autoplay, looping, and whether to show or hide the player controls.

• Audio and Speed Control: Set the initial volume and adjust the playback speed.

• Customizable Appearance: (If applicable - check the actual component for styling options)

Configuring the Video Player

Select the Video Player component on the canvas to access its properties in the Properties Panel (right panel).

Basic Properties

• API Name: (Text) A unique identifier for this component instance (e.g., ProductDemoVideo, WelcomeVideo).

• Source Type: (Text - Select from options) Choose the source of your video:

  • URL: Provide a direct URL to a video file (e.g., an MP4 file hosted on a server).

  • YouTube: Provide the YouTube video ID (the part of the YouTube URL after v=). Example: For https://www.youtube.com/watch?v=dQw4w9WgXQU, the ID is dQw4w9WgXQU.

  • Vimeo: Provide the Vimeo video ID. Important: For Vimeo videos, you must also add https://vimeo.com and https://*.vimeo.com to your Salesforce Trusted URLs (Setup > Security > Trusted URLs) and enable all CSP directives for those sites. This is a security requirement.

  • Salesforce File: Play a video file stored as a Salesforce File (ContentDocument). You'll need to provide the Content Document ID.

• URL/File/ID: (Text) The actual URL, file ID, or video ID, depending on the Source Type you selected.

Playback Behavior

• Autoplay: (Boolean - Checkbox) If enabled, the video will start playing automatically when the component loads. Important: Most browsers require the video to be muted for autoplay to work. Users will need to manually unmute the video.

• Hide Controls: (Boolean - Checkbox) If enabled, the standard video player controls (play/pause, volume, fullscreen, etc.) are hidden. Use this for background videos or situations where you want to control playback programmatically (if supported by Avonni).

• Loop: (Boolean - Checkbox) If enabled, the video will automatically restart from the beginning when it reaches the end.

Audio and Speed

• Volume: (Number) Sets the initial volume level of the video (0 = muted, 100 = maximum volume). Users can typically adjust the volume using the player controls (unless Hide Controls is enabled).

• Playback Rate: (Number) Controls the playback speed.

  • 1: Normal speed.

  • 0.5: Half speed.

  • 2: Double speed.

  • And so on...

Example: Playing a YouTube Video

1. Add Video Player: Drag a Video Player component onto the canvas.

2. Set API Name: Give it a name (e.g., YouTubeDemoVideo).

3. Set Source Type: Set the Source Type to YouTube.

4. Enter YouTube ID: Find a YouTube video (e.g., https://www.youtube.com/watch?v=dQw4w9WgXQU). Copy the video ID (dQw4w9WgXQU in this case) and paste it into the URL/File/ID property.

5. Configure Autoplay (Optional): If you want the video to autoplay, enable Autoplay. Remember that the video will likely be muted initially.

6. Preview: Preview your Dynamic Component. The YouTube video should now play within the Video Player component.

Important Considerations

• Vimeo Configuration: Remember the extra configuration steps required for Vimeo videos (adding Trusted URLs).

• Browser Autoplay Policies: Be aware of browser autoplay restrictions. Autoplaying videos are often muted by default.

• Accessibility: If you hide the controls, provide alternative ways for users to control playback (e.g., custom buttons that interact with the video player via JavaScript – if supported by Avonni).

• File Access: If using Salesforce Files, ensure users have the necessary permissions to access the files.

• Copyright: Only use videos that you have the right to use.

In Summary

The Video Player component allows you to play videos from various sources like URL, Youtube, Vimeo and Salesforce Files. The component offers multiple settings to customize the video player