Tutorial: Your First Surface Composition

This tutorial guides you through the essential concepts of working with surface elements in Editframe. Each step builds on the previous one, teaching you how to efficiently display video content multiple times.

Step 1: Display a Basic Surface

Start with the simplest possible surface — a single ef-surface that mirrors a video element.

What you'll learn: How to create a surface that copies content from a target video element.

Try it yourself: Change the surface's class to use different sizing or positioning. Notice how the surface mirrors the video content exactly, regardless of its own styling.

Step 2: Create Multiple Surfaces from a Single Source

Create multiple surfaces that all mirror the same video source. This demonstrates the efficiency of surfaces — a single video decode feeds any number of displays.

What you'll learn: How to display the same video multiple times using surfaces instead of multiple video elements.

Try it yourself: Add a fourth surface targeting the same video. Notice how all surfaces stay perfectly synchronized — they all show the same frame at the same time.

Step 3: Apply Different CSS Filters to Surfaces

Surfaces can each have different CSS filter styles applied, creating varied visual effects from a single video source.

What you'll learn: How to apply CSS filters to surfaces to create different visual styles.

Try it yourself: Experiment with different CSS filter combinations. Try combining multiple filters like grayscale brightness-150 or sepia blur-sm.

Step 4: Use Surfaces in Timegroup Sequences

Add surfaces to timegroup sequences to create picture-in-picture effects and overlays.

What you'll learn: How to use surfaces within timegroup sequences.

Try it yourself: Create a sequence with multiple videos, each with a surface overlay. Experiment with different positions and sizes for the surface overlays.

---

How-To: Apply CSS Filters to Surfaces

Problem: You need to apply different visual effects to the same video source, creating multiple styled variations.

Solution: Use multiple surface elements targeting the same video, each with different CSS filter classes applied. Surfaces efficiently apply filters without re-decoding the video.

Available filters: blur, brightness, contrast, saturate, grayscale, sepia, hue-rotate, invert, and opacity. You can combine multiple filters in a single class.

Performance benefit: All surfaces share the same video decode and network stream, with filters applied efficiently at the canvas level.

---

How-To: Display Multiple Surfaces from a Single Source

Problem: You need to display the same video multiple times in your composition, but using multiple video elements would be inefficient and resource-intensive.

Solution: Use multiple surface elements that all target the same video element. Each surface mirrors the video's canvas content, sharing a single video decode and network stream.

Key points:

• The target video element must have an id attribute
• All surfaces reference the same id in their target attribute as a CSS selector (e.g. target="#my-video")
• Surfaces automatically stay synchronized with the target video
• Each surface can have different CSS styling applied