Overview
The PlaybackManager controls video playback state, seeking, volume, and scrubbing. Access it through editor.playback.
Usage
Basic playback control
import { useEditor } from '@/hooks/use-editor';
function PlaybackControls() {
const editor = useEditor();
const isPlaying = editor.playback.getIsPlaying();
return (
<button onClick={() => editor.playback.toggle()}>
{isPlaying ? 'Pause' : 'Play'}
</button>
);
}
Seeking to a specific time
// Seek to 5 seconds
editor.playback.seek({ time: 5.0 });
Volume control
// Set volume to 50%
editor.playback.setVolume({ volume: 0.5 });
// Mute audio
editor.playback.mute();
// Unmute audio
editor.playback.unmute();
Methods
play()
Starts video playback. If playback has reached the end, it automatically seeks to the beginning.
Example
pause()
Pauses video playback.
Example
toggle()
Toggles between play and pause states.
Example
editor.playback.toggle();
seek()
Seeks to a specific time in seconds. The time is automatically clamped between 0 and the total duration.
seek({ time }: { time: number }): void
The time to seek to in seconds
// Seek to 10 seconds
editor.playback.seek({ time: 10.0 });
// Seek to beginning
editor.playback.seek({ time: 0 });
Seeking dispatches a playback-seek custom event on the window object.
setVolume()
Sets the playback volume. Automatically unmutes if volume is greater than 0.
setVolume({ volume }: { volume: number }): void
Volume level from 0.0 (silent) to 1.0 (full volume)
// Set to 75% volume
editor.playback.setVolume({ volume: 0.75 });
// Mute by setting volume to 0
editor.playback.setVolume({ volume: 0 });
mute()
Mutes audio playback while preserving the previous volume level.
Example
unmute()
Restores audio to the previous volume level before muting.
Example
editor.playback.unmute();
toggleMute()
Toggles between muted and unmuted states.
Example
editor.playback.toggleMute();
setScrubbing()
Sets the scrubbing state. Used to indicate when the user is dragging the playhead.
setScrubbing({ isScrubbing }: { isScrubbing: boolean }): void
Whether the user is currently scrubbing
// Start scrubbing
editor.playback.setScrubbing({ isScrubbing: true });
// End scrubbing
editor.playback.setScrubbing({ isScrubbing: false });
getIsPlaying()
Returns whether video is currently playing.
Returns
boolean - True if video is playing
Example
if (editor.playback.getIsPlaying()) {
console.log('Video is playing');
}
getCurrentTime()
Returns the current playback time in seconds.
Returns
number - Current time in seconds
Example
const currentTime = editor.playback.getCurrentTime();
console.log(`Current time: ${currentTime}s`);
getVolume()
Returns the current volume level.
Returns
number - Volume level from 0.0 to 1.0
Example
const volume = editor.playback.getVolume();
console.log(`Volume: ${volume * 100}%`);
isMuted()
Returns whether audio is currently muted.
Returns
boolean - True if audio is muted
Example
if (editor.playback.isMuted()) {
console.log('Audio is muted');
}
getIsScrubbing()
Returns whether the user is currently scrubbing.
getIsScrubbing(): boolean
boolean - True if scrubbing
Example
if (editor.playback.getIsScrubbing()) {
console.log('User is scrubbing');
}
subscribe()
Subscribes to playback state changes.
subscribe(listener: () => void): () => void
Function called when playback state changes
() => void - Unsubscribe function
Example
const unsubscribe = editor.playback.subscribe(() => {
console.log('Playback state changed');
});
// Later: cleanup
unsubscribe();
The useEditor() hook automatically subscribes to all manager changes. Only use subscribe() directly in non-React code.
Events
The PlaybackManager dispatches custom events on the window object:
playback-seek
Dispatched when seeking to a new time.
window.addEventListener('playback-seek', (event) => {
console.log('Seeked to:', event.detail.time);
});
playback-update
Dispatched on each frame during playback.
window.addEventListener('playback-update', (event) => {
console.log('Current time:', event.detail.time);
});