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

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

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.

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.

Links

• Figma: tba
• Live style guide: https://e1-dev.k8s.myapp.de/live-style-guide/other-components/video-player

Guidelines

Usage

• Provide a clear label using title so users immediately know what the video covers.
• Set the media source with url; use a templated value when the video depends on context data (url).
• Show playback controls when user control is expected by setting showControls: true.
• Enable immersive viewing for detail-heavy content by turning on allowFullscreen.
• For ambient/looping visuals, combine autoplay: true, mute: true, and (optionally) loop: true; hide controls if interaction isn’t needed with showControls: false.
• Provide a pre-play cue with thumbnail so the player communicates its subject before playback.

Sizing & Layout

• Add breathing room around the player with paddingClass (e.g., a tokenized spacing class).
• Keep title concise to avoid truncation and visual crowding.
• In dense views, reduce chrome by turning showControls: false if the video is purely illustrative (e.g., background/loop).

States & Feedback

• Avoid unexpected audio: if autoplay: true, also set mute: true.
• For short demos, use loop: true; keep showControls: true when users may pause or scrub.
• When autoplay: false, provide a meaningful thumbnail to signal the content and affordance to play.
• Expose the fullscreen affordance with allowFullscreen when careful inspection is likely.

Data-Driven / Conditional Behavior

• Drive the selected video from context by templating url (e.g., per product or locale).
• Show the player only when prerequisites are satisfied with displayConditions (e.g., after a step is completed).
• Use displayConditions to prevent rapid flicker by defining a single, mutually exclusive rule set for visibility.

Visibility & Authorization

• Gate premium or restricted content with visibilityPolicySetId so unauthorized users never see the player.
• Use displayConditions for fine-grained visibility based on app state (e.g., completion flags).

Content & Localization

• Use displayName to keep the component recognizable in authoring tools without changing user-facing text.
• For onboarding, localize tour copy via enableAsHotspot, guidedTourHotSpotTitle, and guidedTourHotSpotDescription.

Dos & Don’ts

Accessibility

• Programmatic name: title.
• Built-in media controls for keyboard/AT: showControls.
• Magnification support: allowFullscreen.
• Testability hooks for a11y automation: id, dataTestId.
• Localized guidance when spotlighting the player: enableAsHotspot, guidedTourHotSpotTitle, guidedTourHotSpotDescription.
• Note: The Article lists no caption/subtitle or contrast/color tokens.
• If captions or transcripts are required, the component itself does not provide them; plan content accordingly given the Article’s limits.
• Prefer showControls: true whenever the video contains essential information; avoid control-less playback for critical content.
• Use localized hotspot text to provide non-visual guidance during tours via guidedTourHotSpotTitle and guidedTourHotSpotDescription.