PlayerProvider

Manages playback state for compositions that contain video, audio, or animations. Wrap Asset with PlayerProvider when you need playback controls.

Usage

import { SessionProvider, PlayerProvider, Asset } from '@asset-studio/core'

export default function App() {
  return (
    <SessionProvider onCreateSession={createSession}>
      <PlayerProvider>
        <PlaybackControls />
        <Asset items={items} width={1920} height={1080} />
      </PlayerProvider>
    </SessionProvider>
  )
}

Props

Prop	Type	Required	Description
children	ReactNode	Yes	Components that need access to playback state.

usePlayer

Control and observe playback from any component inside PlayerProvider:

import { usePlayer } from '@asset-studio/core'

function PlaybackControls() {
  const { isPlaying, play, stop, currentTime } = usePlayer()

  return (
    <div>
      <button onClick={isPlaying ? stop : play}>
        {isPlaying ? 'Stop' : 'Play'}
      </button>
      <span>{currentTime}ms</span>
    </div>
  )
}

Return Value

Property	Type	Description
isPlaying	boolean	Whether playback is currently active.
play	() => void	Start playback.
stop	() => void	Stop and reset playback to the beginning.
currentTime	number	Current playback position in milliseconds.
isVideo	boolean	Whether the composition contains video, audio, or animations.
onSeekStart	() => void	Call when a seek interaction begins (e.g. scrubber mousedown).
onSeek	(timeMs: number) => void	Call during seeking to update the current time.
onSeekEnd	() => void	Call when a seek interaction ends (e.g. scrubber mouseup).

Related

• Asset component
• usePlayer hook