Native Video Component

The Native Video component provides a powerful way to embed videos directly in your application, with support for both standard playback and background video scenarios. It offers lazy loading, accessibility features, and customizable controls.

Overview

Key features include:

• Dual Modes: Standard player and background video modes

• Smart Loading: Videos load only when needed and preload distance is configurable

• Accessibility: Keyboard controls and ARIA support

• Customizable: Flexible styling and behavior options

• SEO-friendly: Structured data support

• Responsive: Adapts to different screen sizes

Usage Examples

Standard Player Mode

Perfect for content-focused videos with controls:

1
<VideoNative
2
    src="/videos/example.mp4"
3
    thumbnail={{
4
        src: thumbnailImage,
5
        alt: "Video description"
6
    }}
7
    player="player"
8
/>

Background Mode

Ideal for hero sections and decorative content. The video will play automatically with no visible controls.

1
<VideoNative
2
    src="/videos/background.mp4"
3
    thumbnail={{
4
        src: thumbnailImage,
5
        alt: "Background video"
6
    }}
7
    player="background"
8
/>

Native Video Component Props API

Thumbnail Configuration

The thumbnail object accepts the following properties:

1
{
2
    src: ImageMetadata;    // Image source
3
    alt: string;           // Alt text
4
    class?: string;        // Optional CSS classes
5
    size?: 'fit' | 'fill'; // Image sizing mode
6
}

Functions

The component exposes the following function for you to use:

1
play(): Promise<void>;

Accessibility Features

• Keyboard Controls:
  • Space/Enter: Play/Pause
  • Arrow Right: Forward 5 seconds
  • Arrow Left: Backward 5 seconds
  • M: Toggle mute
• ARIA Labels: Automatic labeling for controls
• Focus Management: Proper tab order

Structured Data

The component automatically generates VideoObject structured data for SEO:

1
{
2
    title?: string;        // Video title
3
    description?: string;  // Video description
4
    uploadDate?: Date;     // Publication date
5
    structuredDataProps?: Partial<VideoObject>; // Additional properties
6
}