Function

createHTMLMediaAdapter

Create an adapter that maps active timeline clips to one HTMLMediaElement.

Usage notes

Use the imperative adapter when your app owns the media element lifecycle but wants Canvas Timeline to do clip-to-source time mapping. React apps normally use useHTMLMediaAdapter or useHTMLTimelineMedia instead so disposal follows component lifetime.

Signature

Type Definition
createHTMLMediaAdapter(options: CreateHTMLMediaAdapterOptions): HTMLMediaAdapter

Parameters

NameTypeDescription
optionsCreateHTMLMediaAdapterOptionsMedia element and source map used for timeline synchronization.

Returns

Adapter callbacks compatible with useTimelineMediaSync.

Examples

ts Example
import { createHTMLMediaAdapter } from '@techsquidtv/canvas-timeline-html-media-adapter';
const video = document.querySelector('video');
if (video) {
const adapter = createHTMLMediaAdapter({
element: video,
sources: {
'source-1': '/media/interview.mp4',
},
});
await adapter.seek?.(engine.getTime(), engine.getActiveLayers({
layers: {
visuals: { trackKind: 'visual', sourceId: 'source-1' },
},
}));
}