Read-only — tracks buffered and seekable time ranges from the media element. Used by TimeSlider to render the buffer progress indicator.
Import
import { buffer, selectBuffer } from '@videojs/react';
// or
import { buffer, selectBuffer } from '@videojs/html';
Usage
import { createPlayer, buffer } from '@videojs/react';
const Player = createPlayer({
features: [buffer],
});
import { createPlayer, buffer } from '@videojs/html';
const { ProviderMixin, PlayerController, context } = createPlayer({
features: [buffer],
});
State
Buffered time ranges as an array of [start, end] tuples in seconds.
Seekable time ranges as an array of [start, end] tuples in seconds.
Selector
Use selectBuffer to subscribe to only the buffer slice of 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;
const firstRange = buffer.buffered[0];
const bufferedEnd = firstRange ? firstRange[1] : 0;
return (
<div style={{ width: `${bufferedEnd}px` }} />
);
}
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);
}
This feature is read-only — there are no actions. Buffer state is updated automatically as the media element loads data.
