Skip to main content
Tracks media errors reported by the media element.

Import

import { error, selectError } from '@videojs/react';
// or
import { error, selectError } from '@videojs/html';

Usage

import { createPlayer, error } from '@videojs/react';

const Player = createPlayer({
  features: [error],
});

State

error
MediaError | null
The current media error object, or null when no error is present. The MediaError object includes a numeric code and a human-readable message.

Actions

dismissError()
() => void
Clear the current error, resetting error to null.

Selector

Use selectError to subscribe to only the error slice of state. Returns undefined if the error feature is not configured.
import { selectError, usePlayer } from '@videojs/react';

function ErrorDisplay() {
  const err = usePlayer(selectError);
  if (!err?.error) return null;

  return (
    <div>
      <p>{err.error.message}</p>
      <button onClick={err.dismissError}>Dismiss</button>
    </div>
  );
}
Errors are set automatically by the media element. The only action available is dismissError() to clear the current error.

Build docs developers (and LLMs) love