Demonstration
Basic Usage
A surface element displays content from a target video element. Surfaces are the preferred element to use when you want to show the same video source more than once in synchronization, using significantly fewer resources than duplicate video elements:
Multiple Surfaces from Single Source
Multiple surfaces from a single video source are more efficient than multiple video elements:
Efficient Filter Styling
Surfaces can each have different CSS filter styles applied efficiently from a single video source:
Attributes
target
targettargetstringThe ID of the element to copy content from, typically an ef-video element.
💡 The target element must have an id attribute. The surface will look for an element with that ID and copy its canvas content.
✅ Performance Benefit: Multiple surfaces targeting the same video element use significantly fewer resources than multiple ef-video elements.
targetElement
Element | nullThe resolved target element that this surface is copying from.
This property is automatically set when the target attribute is resolved to an actual DOM element.
startTimeMs
numberThe start time of the surface in milliseconds. This time is relative to the timeline described by the root timegroup the surface is contained within.
💡 Surface elements inherit their timing from their target element and containing timegroup.
endTimeMs
numberThe end time of the surface in milliseconds. This time is relative to the timeline described by the root timegroup the surface is contained within.
durationMs
numberThe duration of the surface in milliseconds. This is equivalent to the difference between endTimeMs and startTimeMs.
currentTimeMs
numberThe current time of the surface in milliseconds. This time is the time within the timeline of the root timegroup the surface is contained within.
rootTimegroup
<ef-timegroup> | nullThe outermost timegroup element that contains the surface.
The surface will prefer to use the target element's root timegroup if available, falling back to its own containing timegroup.
Technical Notes
Frame Synchronization: Surfaces automatically wait for their target element to complete frame rendering before copying, ensuring synchronized playback across all surfaces.
Canvas Mirroring: Surfaces create pixel-perfect copies of the target's canvas content, with CSS handling any layout scaling needed.