Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/OpenCut-app/OpenCut/llms.txt

Use this file to discover all available pages before exploring further.

​
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. 
play(): void
Example 
editor.playback.play();

​
pause()

Pauses video playback. 
pause(): void
Example 
editor.playback.pause();

​
toggle()

Toggles between play and pause states. 
toggle(): void
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
​
time
number
required
The time to seek to in seconds
Example 
// 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
number
required
Volume level from 0.0 (silent) to 1.0 (full volume)
Example 
// 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. 
mute(): void
Example 
editor.playback.mute();

​
unmute()

Restores audio to the previous volume level before muting. 
unmute(): void
Example 
editor.playback.unmute();

​
toggleMute()

Toggles between muted and unmuted states. 
toggleMute(): void
Example 
editor.playback.toggleMute();

​
setScrubbing()

Sets the scrubbing state. Used to indicate when the user is dragging the playhead. 
setScrubbing({ isScrubbing }: { isScrubbing: boolean }): void
​
isScrubbing
boolean
required
Whether the user is currently scrubbing
Example 
// Start scrubbing
editor.playback.setScrubbing({ isScrubbing: true });

// End scrubbing
editor.playback.setScrubbing({ isScrubbing: false });

​
getIsPlaying()

Returns whether video is currently playing. 
getIsPlaying(): boolean
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. 
getCurrentTime(): number
Returns
  • number - Current time in seconds
Example 
const currentTime = editor.playback.getCurrentTime();
console.log(`Current time: ${currentTime}s`);

​
getVolume()

Returns the current volume level. 
getVolume(): number
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. 
isMuted(): boolean
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
Returns
  • boolean - True if scrubbing
Example 
if (editor.playback.getIsScrubbing()) {
  console.log('User is scrubbing');
}

​
subscribe()

Subscribes to playback state changes. 
subscribe(listener: () => void): () => void
​
listener
() => void
required
Function called when playback state changes
Returns
  • () => 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);
});

Build docs developers (and LLMs) love

Get started for freeTalk to us