Page History

...

• The Video Player Component is a media player for embedding and playing video content.
• It provides configurable controls and playback options.
• It is suitable for training videos, product demos, or instructional content.
• The component integrates video media into application UIs.

[IMAGE PLACEHOLDER: Video Player showing playback controls and video content] Image Added

Specs

Tokens

Structure

(Configured in General Properties)

• displayName – Sets the display name of the component shown in the structure panel. For example, "Product Training Video" allows for easy identification of the component's purpose in the application structure, making it easier for developers to locate and work with this specific video player.

(Configured in Visual Properties)

• url – Specifies the URL or path to the video file that will be played. This can be a direct link to a video file or a streaming URL. For example, "https://example.com/videos/product-demo.mp4" or "${context.videoUrl}" for dynamic URLs from context data. The URL can be templated to use context values.
• autoplay – Determines whether the video starts playing automatically when the page loads. When set to true, the video will start immediately without requiring user interaction, which is useful for welcome videos or prominent demonstrations.
• showControls – Controls whether the video playback controls (play/pause, volume, progress bar, etc.) are displayed to the user. When set to true, users can control playback; when false, the video plays without user controls, which is useful for background videos or fixed demonstrations.
• allowFullscreen – Enables or disables the fullscreen button in the video controls. When set to true, users can expand the video to fill their entire screen, providing an immersive viewing experience for detailed content.
• mute – Determines whether the video's audio is initially muted. When set to true, the video will play without sound until the user unmutes it, which is useful for videos in professional environments or automatically playing videos.
• loop – Controls whether the video automatically restarts after reaching the end. When set to true, the video will play continuously in a loop, which is useful for short demonstrations or background videos that should continue playing.

[IMAGE PLACEHOLDER: Video Player structure showing url and playback behaviors]

Styling

(Configured in General Properties)

• displayName – Sets the display name of the component shown in the structure panel. For example, "Product Training Video" allows for easy identification of the component's purpose in the application structure, making it easier for developers to locate and work with this specific video player.

• thumbnail – Specifies the URL to an image that will be displayed as the preview before the video starts playing. For example, "https://example.com/thumbnails/product-demo-thumb.jpg" provides a visual preview of the video content. The thumbnail can be templated to use context values from the current context.

(Configured in Visibility)

• displayConditions – Defines conditions for displaying the component. This allows showing or hiding the video player based on complex rules involving form values, user roles, or application state. For example, the video might only be shown after a user completes certain actions or if they have specific permissions.

Styling

(Configured in Visual Properties)

• title – Sets the title text displayed above the video player. For example, "Product Assembly Instructions" provides users with clear information about what the video contains. The title can be templated to use context values, allowing for dynamic titles based on the current data context. thumbnail – Specifies the URL to an image that will be displayed as the preview before the video starts playing. For example, "https://example.com/thumbnails/product-demo-thumb.jpg" provides a visual preview of the video content. The thumbnail can be templated to use context values from the current context
• autoplay – Determines whether the video starts playing automatically when the page loads. When set to true, the video will start immediately without requiring user interaction, which is useful for welcome videos or prominent demonstrations.
• showControls – Controls whether the video playback controls (play/pause, volume, progress bar, etc.) are displayed to the user. When set to true, users can control playback; when false, the video plays without user controls, which is useful for background videos or fixed demonstrations.
• allowFullscreen – Enables or disables the fullscreen button in the video controls. When set to true, users can expand the video to fill their entire screen, providing an immersive viewing experience for detailed content.
• paddingClass – Configures spacing around the video player using CSS classes. For example, "p-4" adds medium padding on all sides of the component to improve visual spacing within its container.

(Configured in Visibility)

• displayConditions – Defines conditions for displaying the component. This allows showing or hiding the video player based on complex rules involving form values, user roles, or application state. For example, the video might only be shown after a user completes certain actions or if they have specific permissions.

[IMAGE PLACEHOLDER: Video Player styling with display name, title, thumbnail, padding, and conditional visibility highlighted] Image Added

Actions & Variants

...

• visibilityPolicySetId – Determines the visibility of the component based on specified policy sets. For example, setting to "premiumContentAccess" restricts the video player visibility to users with premium content access privileges according to the specified policy.

Visibility

...

Tests

(Configured in Testing Hooks)

...