Usage notes
This is the normal React entry point for a single native `<video>` or
`<audio>` preview. The hook owns adapter disposal, reconciles source changes,
and exposes media-aware timeline transport commands. Keep original/proxy
policy in application state and pass the currently resolved source choice.
Signature
useHTMLTimelineMedia(options: UseHTMLTimelineMediaOptions<LayerName>): UseHTMLTimelineMediaResult<LayerName>Type parameters
| Name | Constraint | Default | Description |
|---|---|---|---|
LayerName | string | string | Named media layer keys inferred from `options.layers`. |
Parameters
| Name | Type | Description |
|---|---|---|
| options | UseHTMLTimelineMediaOptions<LayerName> | Sources, layer selectors, and playback policy. |
Returns
UseHTMLTimelineMediaResult<LayerName>
Media-aware transport state and the underlying imperative adapter.
Examples
import { useHTMLTimelineMedia } from '@techsquidtv/canvas-timeline-html-media-adapter/react';
const layers = { visuals: { trackKind: 'visual', sourceId: 'source-1' },} as const;
export function NativePreview() { const media = useHTMLTimelineMedia({ layers, sources: [{ sourceId: 'source-1', input: '/media/interview.mp4' }], onError: (error) => console.error(error.reason, error.message), });
return <video ref={media.mediaRef} playsInline onClick={() => void media.play()} />;}