<Subtitle>A feature-rich video player component with floating mode support, custom controls, and automatic state management.</Subtitle> <Description> The `VideoPlayer` is a comprehensive video playback solution designed to deliver a seamless viewing experience across the platform. It features custom playback controls, automatic floating behavior when scrolled out of view, and full integration with the Xertica UI design system. </Description> <Primary /> ## Main Properties <Controls /> --- ## Features and Functionality ### Custom Playback Controls The player provides a complete set of controls: - **Play/Pause**: Toggle playback with a single click on the video or the control button - **Progress Bar**: Seek to any position in the video - **Volume Control**: Adjust volume with a slider that appears on hover - **Mute Toggle**: Quick mute/unmute button - **Picture-in-Picture**: Float the player as a small overlay - **Fullscreen**: Restore the player to full view ### Auto-Floating Mode When a video is playing and the user scrolls away: - The player automatically transforms into a floating window in the corner - Playback state is preserved (position, playing state) - The floating mode can be toggled manually via the PiP button - Clicking "Restore" returns the player to its original position <Canvas> <VideoPlayerStories.AutoFloat /> </Canvas> ### Intelligent Controls Visibility Controls automatically hide after 2.5 seconds of inactivity while playing: - Moving the mouse restores controls visibility - Clicking anywhere on the video toggles play/pause --- ## Usage Examples ### Basic Video Player Use the default configuration for simple video embedding: ```tsx <VideoPlayer src="https://example.com/video.mp4" title="My Video" /> ``` ### Video with Poster Image Add a poster image for better visual presentation before playback: ```tsx <VideoPlayer src="https://example.com/video.mp4" poster="https://example.com/poster.jpg" title="Featured Video" /> ``` ### Autoplay Video Enable autoplay for background videos or featured content: ```tsx <VideoPlayer src="https://example.com/video.mp4" title="Autoplay Video" autoPlay /> ``` ### Disable Auto-Floating Disable the automatic floating behavior when scrolling: ```tsx <VideoPlayer src="https://example.com/video.mp4" title="Static Video" enableAutoFloat={false} /> ``` --- ## AI Best Practices > [!TIP] > - **Auto-Float** — The floating behavior is ideal for long-form content where users may want to continue watching while scrolling through other content. > - **Posters** — Always provide a `poster` image for better UX, especially for videos that may take time to load. > [!IMPORTANT] > - **Single Instance** — For auto-floating to work correctly, ensure the player is the only instance or properly managed when multiple videos exist on the page.

import { Meta, Title, Subtitle, Description, Primary, Controls, Canvas } from '@storybook/addon-docs/blocks'; import * as VideoPlayerStories from './VideoPlayer.stories'; <Subtitle>A feature-rich video player component with floating mode support, custom controls, and automatic state management.</Subtitle> <Description> The `VideoPlayer` is a comprehensive video playback solution designed to deliver a seamless viewing experience across the platform. It features custom playback controls, automatic floating behavior when scrolled out of view, and full integration with the Xertica UI design system. </Description> <Primary /> ## Main Properties <Controls /> --- ## Features and Functionality ### Custom Playback Controls The player provides a complete set of controls: - **Play/Pause**: Toggle playback with a single click on the video or the control button - **Progress Bar**: Seek to any position in the video - **Volume Control**: Adjust volume with a slider that appears on hover - **Mute Toggle**: Quick mute/unmute button - **Picture-in-Picture**: Float the player as a small overlay - **Fullscreen**: Restore the player to full view ### Auto-Floating Mode When a video is playing and the user scrolls away: - The player automatically transforms into a floating window in the corner - Playback state is preserved (position, playing state) - The floating mode can be toggled manually via the PiP button - Clicking "Restore" returns the player to its original position <Canvas> <VideoPlayerStories.AutoFloat /> </Canvas> ### Intelligent Controls Visibility Controls automatically hide after 2.5 seconds of inactivity while playing: - Moving the mouse restores controls visibility - Clicking anywhere on the video toggles play/pause --- ## Usage Examples ### Basic Video Player Use the default configuration for simple video embedding: ```tsx <VideoPlayer src="https://example.com/video.mp4" title="My Video" /> ``` ### Video with Poster Image Add a poster image for better visual presentation before playback: ```tsx <VideoPlayer src="https://example.com/video.mp4" poster="https://example.com/poster.jpg" title="Featured Video" /> ``` ### Autoplay Video Enable autoplay for background videos or featured content: ```tsx <VideoPlayer src="https://example.com/video.mp4" title="Autoplay Video" autoPlay /> ``` ### Disable Auto-Floating Disable the automatic floating behavior when scrolling: ```tsx <VideoPlayer src="https://example.com/video.mp4" title="Static Video" enableAutoFloat={false} /> ``` --- ## AI Best Practices > [!TIP] > - **Auto-Float** — The floating behavior is ideal for long-form content where users may want to continue watching while scrolling through other content. > - **Posters** — Always provide a `poster` image for better UX, especially for videos that may take time to load. > [!IMPORTANT] > - **Single Instance** — For auto-floating to work correctly, ensure the player is the only instance or properly managed when multiple videos exist on the page.