LogoLogo
HomepageYouTube ChannelInstall from the AppExchange
  • Home
  • Dynamic Components
  • Flow Components
  • Experience Components
  • Projects
  • 👋Welcome
  • Getting Started
    • Product Tour
    • Quickstart Tutorial
    • Avonni Components App
      • Accessing the App
      • Folders
      • Templates
      • Version management
    • Understanding The Essentials
      • Component Builder
      • Component Visibility
      • Target Page Object
      • Using Variables and Component Data
      • Publishing your Dynamic Components
      • Dynamic vs. Flow Components
    • AppExchange Listing Page
    • Installation & Licenses Management
  • Tutorials
    • Projects
    • Components
      • Calendar
        • How to Create Events Quickly by Dragging
        • How to Add an Edit Action to Calendar Events
        • How to Add a New Event Button to the Calendar Header
        • How to Customize the Right-Click Menu
        • How to Reschedule Events with Drag and Drop
      • Columns
        • Creating a Responsive 3-Column Layout
      • Data Table
        • How to customize Data Table style
        • How to make a field editable
        • How to add clickable buttons
        • How to color-code badges
        • How to export data
        • How to configure search
        • How to set columns visibility
        • How to Conditionally Color Data Table Cells
      • Kanban
        • Saving Changes on Drag-and-Drop
      • List
      • Metric
      • Record Detail
        • Saving Changes
    • Interactions
      • How to create an interaction to navigate to an object page
      • How to create an interaction to navigate to a record page
      • How to Pass Multiple Selected Records from a Dynamic Component to a Screen Flow
    • Reactive Components
      • Reactive Map and Data Table
      • Master-Detail Relationship with Data Tables
      • Vertical Tabs with Reactive Data Table
    • Style
      • How do you add space or a break between sections or fields?
    • Tips and Tricks
      • Using the Dynamic Component component
  • Component Builder
    • Overview
    • Configuring Components
      • Properties
      • Fields
      • Style
    • Data & Interactions
      • Data Sources
        • Manual
        • Picklist
      • Resources
        • Constant
        • Formula
        • Nested Queries
        • Query
        • Variable
      • Interactions
        • CRUD from Record Variable
        • Download
        • Execute Flow
        • Navigate
        • On Load
        • Open Alert Modal
        • Open Confirm
        • Open Dynamic Component Dialog
        • Open Dynamic Component Panel
        • Open Flow Panel
        • Open Flow Dialog
        • Show Toast
    • Advanced Features
      • Copy and Paste
      • Debug Panel
      • Keyboard Shortcut
      • Undo / Redo
  • Components
    • Explore All Components
    • Accordion
    • Alert
    • Audio Player
    • Avatar
    • Avatar Group
    • Badge
    • Barcode
    • Blockquote
    • Button
    • Button Group
    • Button Icon
    • Button Menu
    • Button Stateful
    • Calendar
    • Camera 🆕
    • Card
    • Carousel
    • Chart
    • Checkbox
    • Checkbox Button
    • Chip Container
    • Color Picker
    • Columns
    • Combobox
    • Container
    • Counter
    • Data LWC Container
    • Data Table
    • Date Picker
    • Date
    • Date Range
    • Dual Listbox
    • Dynamic Component
    • File Upload
    • Flow
    • Formatted Address
    • Formatted Name
    • Formatted Value
    • Header
    • Icon
    • Icon Picker
    • Illustration
    • Image
    • Input Color
    • Input Date
    • Input Pen (Signature)
    • Input Text
    • Kanban
    • List
    • LWC Container
    • Map
    • Media Object
    • Metric
    • PDF Viewer
    • Pivot Table
    • Progress Bar
    • Progress Circle
    • Progress Indicator
    • Rating
    • Record Detail
    • Relationship Graph
    • Scope Notification
    • Section
    • Separator
    • Slider
    • Status
    • Tabbed Container
    • Tabs
    • Text
    • Text Area
    • Timeline
    • Toggle
    • Tree
    • Vertical Visual Picker
    • Video Player
    • Visual Picker
    • Visual Picker Link
  • Help
    • Contact Support
    • Security
    • Performance Guide
    • Deployment Process
    • Release Notes
    • Report Bugs
Powered by GitBook
LogoLogo

Company

  • About Us
  • Pricing

Policies

  • Privacy Policy
  • Terms of Service
On this page
  • Overview
  • Configuring the Video Player
  • Basic Properties
  • Playback Behavior
  • Audio and Speed
  • Example: Playing a YouTube Video
  • Important Considerations
  • In Summary

Was this helpful?

  1. Components

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

Last updated 3 months ago

Was this helpful?