VideoPlayer

Transcript: A quiet study in shape and motion. This two-second clip has no speech.

Usage

import { VideoPlayer } from "@devvy-ui/react";

<VideoPlayer label="Studio study" sources={[{src:'/examples/studio.mp4',type:'video/mp4'},{src:'/examples/studio.webm',type:'video/webm'}]} tracks={[{src:'/examples/studio.vtt',srcLang:'en',label:'English'}]} transcript={<p>A quiet shape study.</p>} />

API reference

Native HTML attributes, className, style and a forwarded ref are supported. Component-specific props:

Prop	Type	Default	Description
label	string	required	Media name.
sources	{src,type}[]	[]	Ordered native codec fallbacks; use instead of a single src.
preload	none \| metadata \| auto	none	Media loading policy.
tracks	caption track[]	[]	Caption source/language/label/default.
transcript	ReactNode	—	Visible transcript content.
native video props	VideoHTMLAttributes	—	Sources, media events, ref and settings.

Source ownership

Run npx @devvy-ui/cli init once in your React project, then add the source:

npx @devvy-ui/cli add video-player

Make the source yours.

Start from the canonical implementation used by the package and registry. Change the code, keep the MIT notice, and build the behavior your project needs.

VideoPlayer.tsxREACT / TSX

import { forwardRef, type VideoHTMLAttributes, type ReactNode } from 'react';
import { safeURL } from '../lib/widgets';
export interface VideoPlayerProps extends VideoHTMLAttributes<HTMLVideoElement> {
  label: string;
  sources?: readonly { src: string; type: string }[];
  tracks?: readonly { src: string; srcLang: string; label: string; default?: boolean }[];
  transcript?: ReactNode;
}
export const VideoPlayer = forwardRef<HTMLVideoElement, VideoPlayerProps>(function VideoPlayer(
  { label, sources = [], tracks = [], transcript, src, poster, className, children, ...props },
  ref,
) {
  return (
    <figure className="dvy-media-player">
      {/* eslint-disable-next-line jsx-a11y/media-has-caption -- Caption track elements are rendered from the tracks descriptors below; the rule only recognizes static direct children. */}
      <video
        {...props}
        ref={ref}
        aria-label={label}
        controls
        preload={props.preload ?? 'none'}
        src={src ? safeURL(src, true) : undefined}
        poster={poster ? safeURL(poster, true) : undefined}
        className={['dvy-video-player', className].filter(Boolean).join(' ')}
      >
        {sources.map((source) => (
          <source key={source.src} type={source.type} src={safeURL(source.src, true)} />
        ))}
        {tracks.map((track) => (
          <track key={track.srcLang} kind="captions" {...track} src={safeURL(track.src, true)} />
        ))}
        {children}
      </video>
      {transcript && <figcaption>{transcript}</figcaption>}
    </figure>
  );
});

Edit your own copy. Downloaded source uses your changes; the component preview above uses the shipped version. Run the source installer first to include shared helpers.

Interactive preview

Usage

API reference

Accessibility & behavior

Platform Behavior & Guidelines

Source ownership

Make the source yours.