Multi-Track Composition
This guide demonstrates how to create complex multi-track video compositions using Editframe's timegroup system. You'll learn how to layer video, audio, and visual elements to create professional-looking videos.
Basic Multi-Track
The fundamental pattern for multi-track compositions is using contain
mode timegroups with absolute positioning:
Picture-in-Picture
Create picture-in-picture effects by layering videos:
Split Screen
Create split-screen layouts using multiple videos:
Background Video with Overlay Content
Use a video as a background with foreground content:
Sequential Tracks with Parallel Audio
Combine sequence mode for video with contain mode for continuous audio:
Multi-Layer Composition
Create complex compositions with multiple visual layers:
Synchronized Multi-Video
Multiple videos playing in sync on different tracks:
<ef-timegroup mode="contain" class="w-[1920px] h-[1080px] bg-black grid grid-rows-2 grid-cols-2 gap-4 p-4">
<!-- All videos start at the same time and play in parallel -->
<ef-video src="/video1.mp4" class="w-full h-full object-cover rounded"></ef-video>
<ef-video src="/video2.mp4" class="w-full h-full object-cover rounded"></ef-video>
<ef-video src="/video3.mp4" class="w-full h-full object-cover rounded"></ef-video>
<ef-video src="/video4.mp4" class="w-full h-full object-cover rounded"></ef-video>
</ef-timegroup>
Using Surfaces for Efficiency
When displaying the same video multiple times, use surfaces to share decoders:
<ef-timegroup mode="contain" class="w-[1920px] h-[1080px] bg-black">
<!-- Single video element (hidden) -->
<ef-video id="source" src="/video.mp4" class="hidden"></ef-video>
<!-- Multiple surfaces showing the same video with different effects -->
<ef-surface target="source" class="absolute top-0 left-0 w-1/2 h-full object-cover"></ef-surface>
<ef-surface target="source" class="absolute top-0 right-0 w-1/2 h-full object-cover blur-md"></ef-surface>
<ef-surface target="source" class="absolute bottom-4 right-4 w-64 h-36 border-2 border-white"></ef-surface>
</ef-timegroup>
Advanced: Multi-Track Timeline
Create a professional multi-track timeline structure:
<ef-timegroup mode="contain" class="w-[1920px] h-[1080px] bg-black relative">
<!-- Video Track 1 - Background -->
<ef-timegroup mode="fit" class="absolute inset-0 z-0">
<ef-video src="/background.mp4" class="w-full h-full object-cover"></ef-video>
</ef-timegroup>
<!-- Video Track 2 - Main Content -->
<ef-timegroup mode="sequence" class="absolute inset-0 z-10">
<ef-video src="/clip1.mp4" class="w-full h-full object-contain"></ef-video>
<ef-video src="/clip2.mp4" class="w-full h-full object-contain"></ef-video>
</ef-timegroup>
<!-- Graphics Track - Overlays -->
<ef-timegroup mode="sequence" class="absolute top-10 left-10 z-20">
<ef-image src="/logo.png" duration="3s" class="w-32 h-32"></ef-image>
<ef-timegroup mode="fixed" duration="5s" class="invisible"></ef-timegroup>
<ef-image src="/endcard.png" duration="3s" class="w-64 h-64"></ef-image>
</ef-timegroup>
<!-- Audio Track 1 - Music -->
<ef-audio src="/background-music.mp3"></ef-audio>
<!-- Audio Track 2 - Voiceover -->
<ef-audio src="/voiceover.mp3"></ef-audio>
<!-- Captions Track -->
<ef-captions
assetId="caption-file-id"
class="absolute bottom-20 left-0 right-0 text-center z-30"
>
<ef-captions-segment class="text-white text-3xl font-bold bg-black/70 px-4 py-2 rounded"></ef-captions-segment>
</ef-captions>
</ef-timegroup>
Key Concepts
Z-Index Layering
Control which elements appear on top:
<ef-timegroup mode="contain" class="relative">
<ef-video class="z-0">...</ef-video> <!-- Background -->
<ef-video class="z-10">...</ef-video> <!-- Middle layer -->
<div class="z-20">...</div> <!-- Foreground -->
</ef-timegroup>
Fit Mode for Backgrounds
Use mode="fit"
to make elements span the entire duration:
<ef-timegroup mode="contain">
<!-- This background will match the total duration -->
<ef-timegroup mode="fit" class="bg-gradient-to-r from-blue-500 to-purple-500">
</ef-timegroup>
<!-- Other elements define the duration -->
<ef-video src="/video.mp4"></ef-video>
</ef-timegroup>
Mix Blend Modes
Use CSS blend modes for visual effects:
.overlay-video {
mix-blend-mode: screen; /* Lighten */
mix-blend-mode: multiply; /* Darken */
mix-blend-mode: overlay; /* Contrast */
mix-blend-mode: soft-light; /* Gentle blend */
}
React Version
import { Timegroup, Video, Audio, Image, Waveform } from '@editframe/react';
export function MultiTrackComposition() {
return (
<Timegroup mode="contain" className="w-[1920px] h-[1080px] bg-black relative">
{/* Background video track */}
<Video
src="/background.mp4"
className="absolute inset-0 w-full h-full object-cover z-0"
/>
{/* Main content track */}
<Timegroup mode="sequence" className="absolute inset-0 z-10">
<Video src="/clip1.mp4" className="w-full h-full object-contain" />
<Video src="/clip2.mp4" className="w-full h-full object-contain" />
</Timegroup>
{/* Overlay graphics */}
<Image
src="/logo.png"
duration="5s"
className="absolute top-10 right-10 w-32 h-32 z-20"
/>
{/* Audio tracks */}
<Audio src="/music.mp3" />
<Audio src="/voiceover.mp3" />
{/* Waveform visualization */}
<div className="absolute bottom-4 left-4 right-4 z-20">
<Waveform target="voiceover-audio" mode="wave" className="h-16 text-green-400" />
</div>
</Timegroup>
);
}
Common Patterns
Lower Third
Add a lower third graphic that appears during specific sections:
<ef-timegroup mode="contain" class="w-[1920px] h-[1080px]">
<ef-video src="/main.mp4" class="w-full h-full"></ef-video>
<ef-timegroup
mode="fixed"
duration="5s"
class="absolute bottom-0 left-0 right-0 h-24 bg-gradient-to-r from-blue-600 to-blue-800 z-20"
style="animation: slide-up 0.5s ease-out paused, slide-down 0.5s ease-in 4.5s paused"
>
<div class="flex items-center h-full px-8">
<div class="text-white">
<h3 class="text-2xl font-bold">John Doe</h3>
<p class="text-lg">CEO, Example Corp</p>
</div>
</div>
</ef-timegroup>
</ef-timegroup>
<style>
@keyframes slide-up {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
@keyframes slide-down {
from { transform: translateY(0); }
to { transform: translateY(100%); }
}
</style>
Multiple Audio Tracks
Layer multiple audio sources with different timing:
<ef-timegroup mode="contain" class="w-[1920px] h-[1080px]">
<ef-video src="/video.mp4" mute></ef-video>
<!-- Background music -->
<ef-audio src="/music.mp3"></ef-audio>
<!-- Sound effects that start at specific times -->
<ef-timegroup mode="fixed" duration="0s" class="invisible">
<!-- Delay the sound effect -->
</ef-timegroup>
<ef-audio src="/sound-effect.mp3" sourcein="0s" sourceout="2s"></ef-audio>
</ef-timegroup>
Video Collage
Create a collage of multiple videos:
<ef-timegroup mode="contain" class="w-[1920px] h-[1080px] bg-black relative">
<ef-video
src="/video1.mp4"
class="absolute top-0 left-0 w-1/2 h-1/2 object-cover p-2"
></ef-video>
<ef-video
src="/video2.mp4"
class="absolute top-0 right-0 w-1/2 h-1/2 object-cover p-2"
></ef-video>
<ef-video
src="/video3.mp4"
class="absolute bottom-0 left-0 w-1/2 h-1/2 object-cover p-2"
></ef-video>
<ef-video
src="/video4.mp4"
class="absolute bottom-0 right-0 w-1/2 h-1/2 object-cover p-2"
></ef-video>
</ef-timegroup>
Advanced: Programmatic Track Management
Build tracks dynamically:
import { Timegroup, Video, Audio } from '@editframe/react';
interface Track {
id: string;
type: 'video' | 'audio';
src: string;
className?: string;
}
export function MultiTrackEditor({ tracks }: { tracks: Track[] }) {
const videoTracks = tracks.filter(t => t.type === 'video');
const audioTracks = tracks.filter(t => t.type === 'audio');
return (
<Timegroup mode="contain" className="w-[1920px] h-[1080px] bg-black relative">
{/* Render all video tracks */}
{videoTracks.map((track, index) => (
<Video
key={track.id}
src={track.src}
className={track.className || `absolute inset-0 z-${index}`}
/>
))}
{/* Render all audio tracks */}
{audioTracks.map(track => (
<Audio key={track.id} src={track.src} />
))}
</Timegroup>
);
}
Performance Considerations
Using Surfaces
When the same video appears multiple times, use one video with multiple surfaces:
<ef-timegroup mode="contain" class="w-[1920px] h-[1080px]">
<!-- Single decoder -->
<ef-video id="main" src="/video.mp4" class="hidden"></ef-video>
<!-- Multiple views -->
<ef-surface target="main" class="absolute top-0 left-0 w-1/2 h-1/2"></ef-surface>
<ef-surface target="main" class="absolute top-0 right-0 w-1/2 h-1/2 blur-sm"></ef-surface>
<ef-surface target="main" class="absolute bottom-0 left-0 w-1/2 h-1/2 grayscale"></ef-surface>
<ef-surface target="main" class="absolute bottom-0 right-0 w-1/2 h-1/2 sepia"></ef-surface>
</ef-timegroup>
Muting Video Audio
When using separate audio tracks, mute video elements:
<ef-video src="/video.mp4" mute class="w-full h-full"></ef-video>
<ef-audio src="/custom-audio.mp3"></ef-audio>
Tips
- Positioning: Use
absolute
positioning for overlay tracks - Z-Index: Control layer order with z-index classes
- Duration: Use
mode="fit"
for background elements that should span the full duration - Audio: Layer multiple audio sources for music + voiceover + sound effects
- Performance: Use surfaces instead of multiple video elements when showing the same video
- Transitions: Use CSS animations with
--ef-transition-duration
for smooth transitions between clips
Related Documentation
- EFTimegroup - Timeline container with modes
- EFVideo - Video element
- EFAudio - Audio element
- EFSurface - Efficient video copying
- EFWaveform - Audio visualization
- EFCaptions - Text overlays