(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)

Video Player

Overview

• 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]

Specs

Tokens

Structure

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

(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.
• 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]

Actions & Variants

(Configured in Events)

• events – Configures the events that the component can trigger and respond to:
• ON_INIT – Triggered when the video player component is initialized. Can be used to perform setup operations or record analytics about video availability.
• ON_DESTROY – Triggered when the video player component is removed from the DOM. Useful for cleanup operations and releasing resources.

Authorization

(Configured in Authorization)

• 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

[NO DATA AVAILABLE]

Tests

(Configured in Testing Hooks)

• id – Specifies a unique identifier for the component used for programmatic access. For example, "productDemoVideo" enables targeted manipulation of this specific video player component through scripts or automated testing.
• dataTestId – Sets the testing hook ID for automated testing. For example, setting it to "product-demo-video" allows test scripts to reliably locate this component during automated testing.
• enableAsHotspot – Enables the component as a guided tour hotspot. When enabled, the video player can be highlighted during onboarding or tutorial flows to draw user attention to important video content.
• guidedTourHotSpotTitle – Sets the title for the guided tour hotspot, supporting translations. For example, {"en-US": "Product Demo Video", "de-DE": "Produktdemo-Video"} provides clear identification during guided tours.
• guidedTourHotSpotDescription – Sets the description for the guided tour hotspot, supporting translations. For example, {"en-US": "Watch this video to learn how to use the product", "de-DE": "Sehen Sie sich dieses Video an, um zu erfahren, wie Sie das Produkt verwenden"} provides detailed instructions during guided tours.

Guidelines

[NO DATA AVAILABLE]

Accessibility

[NO DATA AVAILABLE]