Display and feedback

VideoPlayer

Responsive native video playback with caption and aspect-ratio support.

Live example

0:00 / 0:03

Themed controls remain available to keyboard and assistive technology users.

Usage

Each example includes the complete adapter-specific parameter reference. Copy it as a starting point, then remove options your use case does not need.

React

import { VideoPlayer } from "@cofob/design-system-react";

/**
 * Complete VideoPlayer parameter reference.
 * @param src
 *   type: string URL
 *   default: —
 *   example: "/video/demo.webm"
 * @param label
 *   type: string | renderable content
 *   required
 *   example: "Product demo"
 * @param caption
 *   type: string | renderable content
 *   default: —
 *   example: "A short product walkthrough."
 * @param aspectRatio
 *   type: CSS aspect-ratio string
 *   default: "16 / 9"
 *   example: "16 / 9"
 * @param durationHint
 *   type: number (seconds)
 *   default: 0
 *   example: {durationHint}
 * @param disabled
 *   type: boolean
 *   default: false
 *   example: {disabled}
 * @param labels
 *   type: Partial<Record<string, string>>
 *   default: —
 *   example: {{ system: "System theme", light: "Light theme", dark: "Dark theme" }}
 * @param videoProps
 *   type: native video element attributes
 *   default: —
 *   example: {videoProps}
 * @param children
 *   type: ReactNode | Svelte Snippet | child HTML
 *   default: —
 *   example: children / snippet / child HTML
 * @param figure attributes
 *   type: native element attributes
 *   default: —
 *   example: class / style / aria-* / data-*
 */
export function VideoPlayerExample() {
  return (
    <VideoPlayer src="/video/demo.webm" label="Product demo" />
  );
}

Svelte

<script lang="ts">
  import { VideoPlayer } from "@cofob/design-system-svelte";

  // Complete VideoPlayer parameter reference.
  // src
  //   type: string URL
  //   default: —
  //   example: "/video/demo.webm"
  // label
  //   type: string | renderable content
  //   required
  //   example: "Product demo"
  // caption
  //   type: string | renderable content
  //   default: —
  //   example: "A short product walkthrough."
  // aspectRatio
  //   type: CSS aspect-ratio string
  //   default: "16 / 9"
  //   example: "16 / 9"
  // durationHint
  //   type: number (seconds)
  //   default: 0
  //   example: {durationHint}
  // disabled
  //   type: boolean
  //   default: false
  //   example: {disabled}
  // labels
  //   type: Partial<Record<string, string>>
  //   default: —
  //   example: {{ system: "System theme", light: "Light theme", dark: "Dark theme" }}
  // videoProps
  //   type: native video element attributes
  //   default: —
  //   example: {videoProps}
  // children
  //   type: ReactNode | Svelte Snippet | child HTML
  //   default: —
  //   example: children / snippet / child HTML
  // figure attributes
  //   type: native element attributes
  //   default: —
  //   example: class / style / aria-* / data-*
</script>

<VideoPlayer src="/video/demo.webm" label="Product demo" />

HTML

<!--
  Complete VideoPlayer parameter reference.
  src
    type: string URL
    default: —
    example: "/video/demo.webm"
  label
    type: string | renderable content
    required
    example: "Product demo"
  caption
    type: string | renderable content
    default: —
    example: "A short product walkthrough."
  aspectRatio
    type: CSS aspect-ratio string
    default: "16 / 9"
    example: "16 / 9"
  durationHint
    type: number (seconds)
    default: 0
    example: {durationHint}
  disabled
    type: boolean
    default: false
    example: {disabled}
  labels
    type: Partial<Record<string, string>>
    default: —
    example: {{ system: "System theme", light: "Light theme", dark: "Dark theme" }}
  videoProps
    type: native video element attributes
    default: —
    example: {videoProps}
  children
    type: ReactNode | Svelte Snippet | child HTML
    default: —
    example: children / snippet / child HTML
  figure attributes
    type: native element attributes
    default: —
    example: class / style / aria-* / data-*
-->
<figure class="cf-video-player" data-cf-video-player data-started="false"><div class="cf-video-player__frame"><video class="cf-video-player__media" src="/video/demo.webm" aria-label="Product demo" controls data-cf-video-media></video><button class="cf-video-player__start" type="button" aria-label="Play video" data-cf-video-start>…</button><div class="cf-video-player__controls">…</div></div></figure>

<script type="module">
  import { initDesignSystem } from "@cofob/design-system-css";

  const designSystem = initDesignSystem(document);
  window.addEventListener("pagehide", () => designSystem.destroy(), { once: true });
</script>

Contract

CSS selector	`.cf-video-player`
Adapters	Native · React · Svelte
Primary props	src · label · caption · aspectRatio · durationHint · disabled · labels · videoProps · children · figure attributes
Documented states	not started · paused · playing · fullscreen · keyboard shortcuts · captions · custom aspect ratio
Interaction	Shared controller or native behavior
Theme	Semantic light and dark tokens

Composition

Native attributes and framework props are forwarded. Add custom classes without replacing the semantic contract.

Parameters

Adapter differences are explicit. Native element attributes are forwarded in React and Svelte and can be written directly in HTML.

Parameter	Type	Default	Adapters	Example	Description
`src`	`string URL`	`—`	React · Svelte · HTML	`"/video/demo.webm"`	Media URL loaded by the native audio or video element.
`label`required	`string \| renderable content`	`required`	React · Svelte · HTML	`"Product demo"`	Visible or accessible name, depending on the component.
`caption`	`string \| renderable content`	`—`	React · Svelte · HTML	`"A short product walkthrough."`	Visible caption for a figure or table.
`aspectRatio`	`CSS aspect-ratio string`	`"16 / 9"`	React · Svelte · HTML	`"16 / 9"`	Reserves layout space before the image loads.
`durationHint`	`number (seconds)`	`0`	React · Svelte · HTML	`{durationHint}`	Known duration used before metadata loads or when duration metadata is unavailable.
`disabled`	`boolean`	`false`	React · Svelte · HTML	`{disabled}`	Prevents user interaction while preserving visible context.
`labels`	`Partial<Record<string, string>>`	`—`	React · Svelte · HTML	`{{ system: "System theme", light: "Light theme", dark: "Dark theme" }}`	Localized visible and accessible labels.
`videoProps`	`native video element attributes`	`—`	React · Svelte · HTML	`{videoProps}`	Forwards muted, poster, preload, cross-origin, event, and other native video attributes.
`children`	`ReactNode \| Svelte Snippet \| child HTML`	`—`	React · Svelte · HTML	`children / snippet / child HTML`	Idiomatic adapter composition content.
`figure attributes`	`native element attributes`	`—`	React · Svelte · HTML	`class / style / aria-* / data-*`	Forwards native class/style, accessibility, event, and data attributes to the root element.