selectBuffer

Select the buffer state slice from the player store

Import

import { selectBuffer } from '@videojs/core/dom';

Usage

Pass selectBuffer to usePlayer (React) or PlayerController (HTML) to subscribe to buffer state. Returns undefined if the buffer feature is not configured.

The returned state includes buffered ranges and percent buffered.

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

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

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

import { createPlayer, features, MediaElement } from '@videojs/html';
import { selectBuffer } from '@videojs/core/dom';

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

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

API Reference

Parameters

Parameter	Type	Default
`state*`	`{}`	`—`

Return Value

MediaBufferState | undefined