Video Composition

Build video compositions with HTML web components (<ef-timegroup>, <ef-video>, etc.) or React (<Timegroup>, <Video>, etc.). Same composition model, same rendering pipeline — pick the syntax that fits your project.

Web component attributes use kebab-case (sourcein, auto-init). React props use camelCase (sourceIn, autoInit). Each element reference documents both.

Before opening any reference file, answer:

1. HTML or React?

• HTML/web components — kebab-case attributes, works in any HTML file
• React — camelCase props, requires TimelineRoot wrapper (see references/timeline-root.md)

2. What's the core structure? Every composition is a tree of ef-timegroup containers. Pick a mode:

• mode="sequence" — children play one after another (scenes)
• mode="fixed" — children play simultaneously for a set duration
• mode="contain" — expands to fit children

3. What does the user need?