videojs/video.js · error · Error

Can not register Player component after player has been crea

Error message

Can not register Player component after player has been created.

What it means

The Player component class is special — it holds the live Player.players map of active instances. Re-registering it after instances exist would orphan those instances and break videojs('id') lookups, so video.js forbids it while any non-null player is alive. You may only re-register Player before creation or after every player has been disposed.

Source

Thrown at src/js/component.js:2031

    if (!Component.components_) {
      Component.components_ = {};
    }

    const Player = Component.getComponent('Player');

    if (name === 'Player' && Player && Player.players) {
      const players = Player.players;
      const playerNames = Object.keys(players);

      // If we have players that were disposed, then their name will still be
      // in Players.players. So, we must loop through and verify that the value
      // for each item is null. This allows registration of the Player component
      // after all players have been disposed or before any were created.
      if (players && playerNames.length > 0) {
        for (let i = 0; i < playerNames.length; i++) {
          if (players[playerNames[i]] !== null) {
            throw new Error('Can not register Player component after player has been created.');
          }
        }
      }
    }

    Component.components_[name] = ComponentToRegister;
    Component.components_[toLowerCase(name)] = ComponentToRegister;

    return ComponentToRegister;
  }

  /**
   * Get a `Component` based on the name it was registered with.
   *
   * @param {string} name
   *        The Name of the component to get.
   *
   * @return {typeof Component}

View on GitHub (pinned to c3a7e0e6d2)

Solutions

Register your custom Player subclass BEFORE any videojs() instances are created (typically at module load).
Dispose all existing players first: videojs.getAllPlayers().forEach(p => p.dispose()), then register.
Guard against double-registration in HMR by tracking whether the custom Player was already registered.

Example fix

// before
const p = videojs('vid');
videojs.registerComponent('Player', MyPlayer); // throws
// after
videojs.registerComponent('Player', MyPlayer); // before any instance
const p = videojs('vid');

Defensive patterns

Strategy: validation

Validate before calling

function registerPlayerSafe(Klass) {
  const players = videojs.players || {};
  const alive = Object.keys(players).some(k => players[k] !== null);
  if (alive) throw new Error('dispose all players before re-registering Player');
  videojs.registerComponent('Player', Klass);
}

Type guard

const noAlivePlayers = () =>
  Object.keys(videojs.players || {}).every(k => videojs.players[k] === null);

Prevention

Register custom Player subclasses once, before any instance.
In HMR, track registration and skip on reload.
Dispose players explicitly in teardown.

When it happens

Trigger: Calling videojs.registerComponent('Player', CustomPlayer) after at least one videojs instance has been created and not disposed.

Common situations: Hot-module reloading in dev that re-runs the Player registration; lazy-loading a custom Player subclass; upgrading video.js without disposing old players first.

Related errors

AI-assisted analysis of videojs/video.js@c3a7e0e6d2 (2026-08-13). Data as JSON: /api/errors/0cf854bab23f25df. Report an issue: GitHub.