useMediaControls

v0.0.15testeddemo

Reactive controls and state for an `<audio>`/`<video>` element: play/pause, seeking, duration, buffered ranges, volume, mute, rate, text tracks, and Picture-in-Picture. Source and track injection are handled for you, and all DOM listeners attach passively with automatic cleanup. SSR-safe.

Source Tests

Examples

const video = useTemplateRef<HTMLVideoElement>('video');
const { playing, currentTime, duration, volume } = useMediaControls(video, {
  src: 'https://example.com/clip.mp4',
});
playing.value = true; // start playback

const { tracks, enableTrack, togglePictureInPicture } = useMediaControls(video, {
  src: 'video.mp4',
  tracks: [{ default: true, src: 'en.vtt', srcLang: 'en', label: 'English', kind: 'subtitles' }],
});

Demo

Loading demo…

Signature

export function useMediaControls(
  target: MaybeComputedElementRef<HTMLMediaElement | null | undefined>,
  options: UseMediaControlsOptions ={ ... }

Parameters

Parameter	Type	Default	Description
`target`	`MaybeComputedElementRef<HTMLMediaElement \| null \| undefined>`	—	The media element (reactive ref, getter, or component instance)
`options`?	`UseMediaControlsOptions`	`{}`	Source/track configuration and a custom `document`

Returns

UseMediaControlsReturnReactive media state plus track and Picture-in-Picture controls