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

  1. Positioning: Use absolute positioning for overlay tracks
  2. Z-Index: Control layer order with z-index classes
  3. Duration: Use mode="fit" for background elements that should span the full duration
  4. Audio: Layer multiple audio sources for music + voiceover + sound effects
  5. Performance: Use surfaces instead of multiple video elements when showing the same video
  6. Transitions: Use CSS animations with --ef-transition-duration for smooth transitions between clips