useVideo

Hook to use an HTML video element. See demo

Demo

INFO

The component use useVideo hook to use a video track.

Loading demo…

Show source code

import { useVideo } from "../../../..";
import video from '../../../../assets/mov_bbb.mp4';

export const UseVideo = () => {
	const {MediaElement, state, controls: {play, pause}} = useVideo({ src: video, controls: true });

	return <div>
		{MediaElement}
		<p>Status: {state.paused ? "paused" : state.playing ? "playing" : "ready"}</p>
		<button onClick={play} disabled={state.playing}>Play</button>
		<button onClick={pause} disabled={state.paused}>Pause</button>
	</div>
}

Types

UseVideoProps

Props accepted by useVideo.

These are the standard HTMLVideoElement attributes you would normally pass to a <video> tag (e.g. src, autoPlay, loop, controls, muted, playsInline, poster, etc.). All attributes are optional.

The hook creates the video element internally and binds these attributes to it, so you do not need to render a <video> tag yourself — use the returned MediaElement instead.

export type UseVideoProps = MediaHTMLAttributes<HTMLVideoElement>;

UseVideoResult

Result object returned by useVideo.

Property	Type	Required	Description
state	HTMLMediaState	✓	Reactive snapshot of the current video element state. Re-renders the component whenever a media event fires. See {@link HTMLMediaState} for the full list of fields.
controls	HTMLMediaControls	✓	Imperative control functions for the video element (play, pause, mute, seek, volume, playback rate, etc.). All functions are stable references and safe to call in event handlers. See {@link HTMLMediaControls} for the full API.
MediaElement	DetailedReactHTMLElement<HTMLAttributes<HTMLVideoElement>, HTMLVideoElement>	✓	The React &lt;video&gt; element to render in JSX. Rendering this element is required for the hook to function — it binds the internal ref and event listeners to the DOM node.
ref	MutableRefObject<HTMLVideoElement \| null>	✓	Direct ref to the underlying HTMLVideoElement. Useful for advanced imperative access not covered by controls (e.g. reading videoWidth, videoHeight, or calling requestPictureInPicture). null before the element mounts.