Video Display Examples

Display videos with support for multiple sources, glob patterns, and sorting.

Type Interface

import type { BaseChartProps, SortOrder } from '../../types';

export interface VideoSource {
  src: string;
  type?: string;
}

export interface VideoProps extends BaseChartProps {
  // Single source or pattern
  src?: string;
  sources?: VideoSource[];

  // Glob pattern support
  glob?: string;
  sortOrder?: SortOrder;

  // Video controls
  controls?: boolean;
  autoplay?: boolean;
  loop?: boolean;
  muted?: boolean;
  preload?: 'auto' | 'metadata' | 'none';

  // Appearance
  poster?: string;
  caption?: string;

  // Callbacks
  onPlay?: () => void;
  onPause?: () => void;
  onEnded?: () => void;
  onError?: () => void;
}

Basic Video Player

import { Video } from '@vuer-ai/vuer-viz';

export default function BasicVideoExample() {
  return (
    <Video
      src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
      controls={true}
      caption="Big Buck Bunny - Sample Video"
    />
  );
}

Glob Pattern Support

The Video component supports glob patterns for loading video sequences. This requires server-side implementation to resolve file paths.

import { Video } from '@vuer-ai/vuer-viz';

export default function GlobVideoExample() {
  return (
    <Video
      glob="videos/*.mp4"
      sortOrder="natural"
      caption="Example: Video sequence from pattern"
    />
  );
}

Features

• Standard HTML5 video controls
• Multiple source support (MP4, WebM, Ogg)
• Glob pattern support with sort options: natural, mtime, name, asc, desc
• Autoplay, loop, and muted options
• Poster image support
• Optional captions
• Playback event callbacks (onPlay, onPause, onEnded)
• Error handling

← Back to all charts