Quality

Video rendition state and actions for the player store

Tracks video renditions and selects a manual rendition or automatic adaptive bitrate.

API Reference

State

Property	Type	Details
`videoRenditionList`	`MediaVideoRendition[]`
Description Video renditions available for manual quality selection.
`activeVideoRendition`	`null \| MediaVideoRendition`
Description Video rendition currently playing, including when automatic ABR is selected.

Actions

Action	Type	Details
`selectVideoRendition`	`(value: string) => void`
Description Select a video rendition by menu value, or automatic ABR with `"auto"`.

Selector

Pass selectQuality to usePlayer to subscribe to quality state. Returns undefined if the quality feature is not configured.

import { selectQuality, usePlayer } from '@videojs/react';

function QualityInfo() {
  const quality = usePlayer(selectQuality);
  if (!quality) return null;

  return <span>{quality.videoRenditionList.length} renditions</span>;
}

import { createPlayer, MediaElement, selectQuality } from '@videojs/html';
import { videoFeatures } from '@videojs/html/video';

const { PlayerController, context } = createPlayer({ features: videoFeatures });

class QualityInfo extends MediaElement {
  readonly #quality = new PlayerController(this, context, selectQuality);
}