Video Player

v0.2.20

Documentation Under Review

Catalyst Video Player wraps Brightcove's React Player Loader with PMI design-system tokens, responsive control-bar styling, and VideoPlayerIconSlot for injecting Catalyst icons into any player control — giving you a fully branded, accessible video experience with zero custom CSS.

Installation

npm install @pmi/catalyst-video-player

import { VideoPlayerRoot, VideoPlayerIconSlot } from '@pmi/catalyst-video-player';

Add the preset to your tailwind.config.ts:

import tailwindVideoPlayerPreset from '@pmi/catalyst-video-player';

export default {
  presets: [tailwindVideoPlayerPreset],
  // ...
};

Common Patterns

With Captions

A video with closed captions and subtitle support:

With Chapters

A video configured with chapter markers for navigation:

With Audio Tracks

A video with multiple audio language options:

Size Variants

Pass size ("xs" | "sm" | "md" | "lg") to VideoPlayerRoot to control the big play button overlay size. Defaults to "md".

API Reference

The Brightcove player requires the following CSP directives. Add these to your application headers:

{
  'connect-src': ['https://*.brightcove.com', 'https://*.boltdns.net', 'https://*.brightcovecdn.com'],
  'script-src': ['https://*.brightcove.net', 'https://vjs.zencdn.net', "'unsafe-inline'", "'unsafe-eval'"],
  'style-src': ["'unsafe-inline'"],
  'font-src': ['https://*.brightcove.com', 'https://cdn.fontshare.com', 'data:'],
  'style-src-elem': ['https://*.brightcove.com', 'http://*.s3.amazonaws.com', 'https://api.fontshare.com', "'unsafe-inline'"],
  'img-src': ['https://*.brightcove.com', 'https://*.boltdns.net'],
}

The unsafe-inline and unsafe-eval directives are required by the Brightcove player. If your security policy restricts these, consult your security team about nonce-based CSP.

API Reference

VideoPlayerRoot

VideoPlayerIconSlot

PlayerState

Accessibility

The Brightcove player is WCAG 2.2 AA compliant. Always provide closed captions for all video content and test keyboard navigation across all controls.

Keyboard Interactions

ARIA and Screen Reader Support

• All player controls have ARIA labels provided by the Brightcove player
• Caption and subtitle tracks are announced on activation
• Volume and seek changes are announced as live region updates
• Focus indicators are visible on all interactive controls

Choosing the Right Component

Related

• Icons -- Catalyst icons used in player control slots
• Aspect Ratio -- Container for responsive video sizing