Buffer

Buffered and seekable time range state for the player store

Tracks buffered and seekable time ranges. Each range is a [start, end] pair rather than a browser TimeRanges object.

During live playback, seekable tells you which times remain available. The first start is the oldest available time, and the last end is the newest. Both values can move forward as a sliding live stream drops older video and adds new video. See live state for the live-edge values.

Import

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

The audioFeatures, liveAudioFeatures, liveVideoFeatures, and videoFeatures feature bundles include this feature.

API Reference

State

Property	Type	Details
`buffered`	`[number, number][]`
Description Buffered time ranges as [start, end] tuples.
`seekable`	`[number, number][]`
Description Seekable time ranges as [start, end] tuples.

Selector

Pass selectBuffer to usePlayer to subscribe to buffer state. Returns undefined if the buffer feature is not configured.

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

function BufferedRanges() {
  const buffer = usePlayer(selectBuffer);
  if (!buffer) return null;

  return (
    <ul>
      {buffer.buffered.map(([start, end]) => (
        <li key={`${start}-${end}`}>{start.toFixed(1)}–{end.toFixed(1)} seconds</li>
      ))}
    </ul>
  );
}

import { createPlayer, UIElement, selectBuffer } from '@videojs/html';
import { videoFeatures } from '@videojs/html/video';

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

class BufferBar extends UIElement {
  readonly #buffer = new PlayerController(this, selectBuffer);
}