FrameworkStyle

Buffer

Buffered and seekable time range state for the player store

Read-only — tracks buffered and seekable time ranges.

API Reference

State

Property Type Details
buffered [number, number][]
seekable [number, number][]

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}%` }} />
  );
}