import { Canvas, Controls, Meta } from '@storybook/blocks';
import { ComponentHeader } from '~styleguide/blocks';
import * as VideoStories from './Video.stories';
export const parameters = {
subtitle: A video player supporting HLS, DASH, YouTube, and Vimeo with enhanced accessibility and customization options.,
design: {
type: 'figma',
url: 'https://www.figma.com/file/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=31226-41393',
},
status: 'updating',
source: {
repo: 'gamut',
githubLink:
'https://github.com/Codecademy/gamut/blob/main/packages/gamut/src/Video/index.tsx',
},
};
<ComponentHeader {...parameters} />
The Video component is a feature-rich video player that supports multiple video sources and formats with enhanced accessibility features.
- Multiple Sources: Supports YouTube, Vimeo, HLS, and DASH video streams
- Accessibility: Enhanced keyboard navigation and screen reader support
- Internationalization: Customizable UI text through translations props
- Captions: Supports multiple caption formats (VTT, SRT, SSA)
- Chapters: Video chapter navigation support
- Thumbnails: Preview thumbnails on timeline hover
- Gestures: Touch and mouse gesture controls
- Always provide descriptive video titles for accessibility
- Include captions when possible
- Use appropriate poster images for better initial loading experience
- Some videos might have settings where you cannot share/embed them, make sure to check the video URL before making the Video go live