Render to Video Tutorial

Build a composition and export it as MP4 video directly in the browser using WebCodecs.

Prerequisites

Browser must support WebCodecs API (Chrome 94+, Edge 94+, Safari 16.4+). Check support:

const supported = 'VideoEncoder' in window && 'VideoDecoder' in window;

Step 1: Create a Composition

Start with a basic composition that you want to render:

Step 2: Add Export Button

Create UI for triggering the export:

<button id="exportBtn" class="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50">
  Export Video
</button>

<div id="progressContainer" class="mt-4 hidden">
  <div class="flex justify-between text-sm text-gray-300 mb-2">
    <span id="progressText">Preparing...</span>
    <span id="progressPercent">0%</span>
  </div>
  <div class="w-full bg-gray-700 rounded-full h-3">
    <div id="progressBar" class="bg-blue-600 h-3 rounded-full transition-all" style="width: 0%"></div>
  </div>
  <div class="mt-2 text-xs text-gray-400">
    <span id="timeInfo"></span>
  </div>
</div>

Step 3: Implement Basic Render

Call renderToVideo() on the timegroup element:

const timegroup = document.getElementById('myComposition');
const exportBtn = document.getElementById('exportBtn');

exportBtn.addEventListener('click', async () => {
  exportBtn.disabled = true;

  try {
    await timegroup.renderToVideo({
      fps: 30,
      codec: 'avc',
      filename: 'my-video.mp4'
    });

    alert('Video exported successfully!');
  } catch (error) {
    alert('Export failed: ' + error.message);
  } finally {
    exportBtn.disabled = false;
  }
});

The video automatically downloads when rendering completes.

Step 4: Add Progress Tracking

Show real-time progress with the onProgress callback:

const progressContainer = document.getElementById('progressContainer');
const progressBar = document.getElementById('progressBar');
const progressText = document.getElementById('progressText');
const progressPercent = document.getElementById('progressPercent');
const timeInfo = document.getElementById('timeInfo');

exportBtn.addEventListener('click', async () => {
  exportBtn.disabled = true;
  progressContainer.classList.remove('hidden');

  try {
    await timegroup.renderToVideo({
      fps: 30,
      codec: 'avc',
      filename: 'my-video.mp4',
      onProgress: (progress) => {
        // Update progress bar
        const percent = Math.round(progress.progress * 100);
        progressBar.style.width = `${percent}%`;
        progressPercent.textContent = `${percent}%`;

        // Update status text
        progressText.textContent = `Rendering frame ${progress.currentFrame} of ${progress.totalFrames}`;

        // Show timing information
        const elapsed = Math.round(progress.elapsedMs / 1000);
        const remaining = Math.round(progress.estimatedRemainingMs / 1000);
        const speed = progress.speedMultiplier.toFixed(1);
        timeInfo.textContent = `Elapsed: ${elapsed}s | Remaining: ${remaining}s | Speed: ${speed}x`;
      }
    });

    progressText.textContent = 'Export complete!';
    progressPercent.textContent = '100%';
  } catch (error) {
    progressText.textContent = 'Export failed: ' + error.message;
  } finally {
    exportBtn.disabled = false;
  }
});

Step 5: Add Codec Selection

Let users choose the codec based on browser support:

<select id="codecSelect" class="px-4 py-2 bg-gray-700 text-white rounded">
  <option value="avc">H.264 (Best Compatibility)</option>
  <option value="hevc">H.265 (Better Compression)</option>
  <option value="vp9">VP9 (Open Codec)</option>
  <option value="av1">AV1 (Best Quality)</option>
</select>

const codecSelect = document.getElementById('codecSelect');

// Check codec support on load
const codecs = ['avc', 'hevc', 'vp9', 'av1'];
codecs.forEach(async (codec) => {
  const config = {
    codec: codec === 'avc' ? 'avc1.42E01E' :
           codec === 'hevc' ? 'hvc1.1.6.L93.B0' :
           codec === 'vp9' ? 'vp09.00.10.08' : 'av01.0.05M.08',
    width: 1280,
    height: 720,
    bitrate: 5_000_000,
    framerate: 30
  };

  const supported = await VideoEncoder.isConfigSupported(config);
  if (!supported.supported) {
    const option = codecSelect.querySelector(`option[value="${codec}"]`);
    option.disabled = true;
    option.textContent += ' (Not Supported)';
  }
});

// Use selected codec when rendering
exportBtn.addEventListener('click', async () => {
  const codec = codecSelect.value;
  // ... rest of render code
  await timegroup.renderToVideo({
    fps: 30,
    codec: codec,
    filename: 'my-video.mp4',
    onProgress: (progress) => { /* ... */ }
  });
});

Step 6: Include Audio

Audio from ef-video and ef-audio elements is automatically mixed:

<ef-timegroup id="compositionWithAudio" mode="sequence" class="w-[1280px] h-[720px]">
  <ef-timegroup mode="fixed" duration="5s" class="absolute w-full h-full">
    <ef-video src="/assets/clip.mp4" class="size-full object-cover"></ef-video>
    <ef-audio src="/assets/music.mp3" volume="0.3"></ef-audio>
  </ef-timegroup>
</ef-timegroup>

await timegroup.renderToVideo({
  fps: 30,
  codec: 'avc',
  includeAudio: true,              // Default: true
  audioBitrate: 192_000,           // 192 kbps for high quality
  preferredAudioCodecs: ['opus', 'aac'],  // Preference order
  filename: 'video-with-audio.mp4'
});

Step 7: Add Cancel Support

Allow users to abort long renders:

<button id="cancelBtn" class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 hidden">
  Cancel Render
</button>

let abortController = null;
const cancelBtn = document.getElementById('cancelBtn');

exportBtn.addEventListener('click', async () => {
  exportBtn.disabled = true;
  cancelBtn.classList.remove('hidden');
  progressContainer.classList.remove('hidden');

  abortController = new AbortController();

  try {
    await timegroup.renderToVideo({
      fps: 30,
      codec: 'avc',
      filename: 'my-video.mp4',
      signal: abortController.signal,
      onProgress: (progress) => {
        // Update progress UI
        const percent = Math.round(progress.progress * 100);
        progressBar.style.width = `${percent}%`;
        progressPercent.textContent = `${percent}%`;
      }
    });

    progressText.textContent = 'Export complete!';
  } catch (error) {
    if (error.name === 'RenderCancelledError') {
      progressText.textContent = 'Render cancelled by user';
    } else {
      progressText.textContent = 'Export failed: ' + error.message;
    }
  } finally {
    exportBtn.disabled = false;
    cancelBtn.classList.add('hidden');
    abortController = null;
  }
});

cancelBtn.addEventListener('click', () => {
  if (abortController) {
    abortController.abort();
  }
});

Complete Example

Advanced Options

High-Resolution Export

Render at higher resolution than the composition:

await timegroup.renderToVideo({
  scale: 2,              // 2x resolution (2560x1440 from 1280x720)
  bitrate: 10_000_000,   // Increase bitrate for quality
  filename: 'high-res.mp4'
});

Partial Export

Export only a portion of the composition:

await timegroup.renderToVideo({
  fromMs: 2000,    // Start at 2 seconds
  toMs: 8000,      // End at 8 seconds
  filename: 'clip.mp4'
});

Programmatic Access

Get the video as a buffer instead of downloading:

const videoBuffer = await timegroup.renderToVideo({
  returnBuffer: true,
  filename: 'video.mp4'
});

// Upload to server
const formData = new FormData();
formData.append('video', new Blob([videoBuffer], { type: 'video/mp4' }));
await fetch('/api/upload', { method: 'POST', body: formData });

Next Steps

• See render-api.md for all options
• See render-strategies.md for choosing between browser, CLI, and cloud rendering
• See the editframe-cli skill for server-side rendering