Controls play/pause state and tracks whether playback has started or is stalled. Required by PlayButton and buffering indicator components.
Import
import { playback, selectPlayback } from '@videojs/react';
// or
import { playback, selectPlayback } from '@videojs/html';
Usage
import { createPlayer, playback } from '@videojs/react';
const Player = createPlayer({
features: [playback],
});
import { createPlayer, playback } from '@videojs/html';
const { ProviderMixin, PlayerController, context } = createPlayer({
features: [playback],
});
State
Whether playback is currently paused.
Whether playback has reached the end of the media.
Whether playback has started (played or seeked at least once).
Whether playback is stalled waiting for more data to buffer.
Actions
Start playback. Returns a promise that resolves when playback begins.
Selector
Use selectPlayback to subscribe to only the playback slice of state. Returns undefined if the playback feature is not configured.
import { selectPlayback, usePlayer } from '@videojs/react';
function PlayButton() {
const playback = usePlayer(selectPlayback);
if (!playback) return null;
return (
<button onClick={playback.paused ? playback.play : playback.pause}>
{playback.paused ? 'Play' : 'Pause'}
</button>
);
}
import { createPlayer, MediaElement, selectPlayback } from '@videojs/html';
import { videoFeatures } from '@videojs/html/video';
const { PlayerController, context } = createPlayer({ features: videoFeatures });
class PlayButton extends MediaElement {
readonly #playback = new PlayerController(this, context, selectPlayback);
}
Required by: PlayButton, BufferingIndicator
