Video

The Video component is designed to embed videos within your application with optional dynamic controls and captions. This component is particularly useful for enhancing the user experience by providing multimedia content that is responsive and accessible.

Usage

Video Component Usage

import React from 'react';
import Video from '~/ui/components/Video';

export default function App() {
  return (
    <Video
      url="https://path/to/video.mp4"
      caption="This is a caption describing the video content."
      controls
      spaceAfter={30}
    />
  );
}

Rendered Example

This is a caption describing the video content.

Props

Name	Type	Default	Description
url	string	`undefined`	The URL of the video to be played
file	string	`undefined`	Local path to a video file (used if `url` is not provided)
controls	boolean	`false`	Whether to display playback controls
loop	boolean	`true`	Whether the video should loop when ended
caption	string	`undefined`	Caption text displayed below the video
spaceAfter	boolean \| number	`false`	Margin bottom space after the video component

This component leverages React's visibility sensor to load and play the video only when it's visible on the screen, enhancing performance by reducing unnecessary data loading. The optional controls prop allows users to interact with the video, providing play/pause and seek functionalities when set to true.

For further customization, the spaceAfter prop can be adjusted to manage the spacing after the video element, which is particularly useful for layout management in complex UIs.