Quality

Video rendition state and actions for the player store

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

Import

import { qualityFeature } from '@videojs/react';

The videoFeatures feature bundle includes this feature.

API Reference

State

Property	Type	Details
`videoRenditionList`	`MediaVideoRendition[]`
Description Video renditions available for manual quality selection.
`activeVideoRendition`	`{ id?: string; width?: number; height?: number; bitrate?: number; frameRate?: number; codec?: string; selected: boolean } \| null`
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, UIElement, selectQuality } from '@videojs/html';
import { videoFeatures } from '@videojs/html/video';

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

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