Buffer

Buffered and seekable time range state for the player store

Read-only — tracks buffered and seekable time ranges.

State

State	Type	Description
`buffered`	`[number, number][]`	Buffered time ranges as `[start, end]` tuples
`seekable`	`[number, number][]`	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 BufferBar() {
  const buffer = usePlayer(selectBuffer);
  if (!buffer) return null;

  return (
    <div style={{ width: `${buffer.percentBuffered * 100}%` }} />
  );
}

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

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

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

API Reference

Parameters

Parameter	Type	Default
`state*`	`object`	`—`

Return Value

MediaBufferState | undefined