The Video Player Component is a versatile media player that enables the embedding and playback of video content within your application. It provides a configurable interface for video playback with support for various controls and playback options. This component is ideal for training videos, product demos, instructional content, or any scenario where video media needs to be integrated into your application's UI.
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.
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.
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.
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.
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 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.