FrameworkStyle

BufferingIndicator

A component that displays a loading indicator when media is buffering

Anatomy 

<BufferingIndicator />

Behavior

Shows a loading indicator when the media is waiting to buffer and not paused, but only after a configurable delay (default 500ms). This delay prevents the indicator from flickering during brief stalls. The indicator hides immediately when buffering ends.

Styling

Hide and show the indicator based on the data-visible attribute.

Examples

Basic Usage 

import { BufferingIndicator, createPlayer, features, Video } from '@videojs/react';

import './BasicUsage.css';

const Player = createPlayer({ features: [...features.video] });

export default function BasicUsage() {
  return (
    <Player.Provider>
      <Player.Container className="react-buffering-indicator-basic">
        <Video
          src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
          autoPlay
          muted
          playsInline
          loop
        />
        <BufferingIndicator
          className="react-buffering-indicator-basic__overlay"
          render={(props, state) => (
            <div {...props}>{state.visible && <div className="react-buffering-indicator-basic__spinner" />}</div>
          )}
        />
      </Player.Container>
    </Player.Provider>
  );
}

API Reference

Props

Prop Type Default
delay number 500

State

State is accessible via the render, className, and style props.

Property Type
visible boolean

Data attributes

Attribute Description
data-visible Present when the buffering indicator is visible (after delay).
VideoJS