JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>FFmpeg.wasm Browser Demo</title>
  <script type="module">
    import { createFFmpeg, fetchFile } from 'https://cdn.jsdelivr.net/npm/@ffmpeg/[email protected]/+esm';

    const ffmpeg = createFFmpeg({ log: true });
    const log = msg => {
      const logDiv = document.getElementById('log');
      logDiv.innerHTML += msg + '<br>';
      logDiv.scrollTop = logDiv.scrollHeight;
    };

    window.addEventListener('DOMContentLoaded', () => {
      const convertBtn = document.getElementById('convertBtn');
      const fileInput = document.getElementById('fileInput');
      const outputVideo = document.getElementById('outputVideo');
      let file;

      fileInput.addEventListener('change', (e) => {
        file = e.target.files[0];
        if (file) convertBtn.disabled = false;
      });

      convertBtn.addEventListener('click', async () => {
        if (!file) return;

        convertBtn.disabled = true;
        log('⏳ Loading FFmpeg core...');
        await ffmpeg.load();

        log('📦 Writing file to virtual FS...');
        ffmpeg.FS('writeFile', file.name, await fetchFile(file));

        const outputName = 'output.mp4';
        log('🎬 Converting...');
        await ffmpeg.run('-i', file.name, '-c:v', 'libx264', '-crf', '28', outputName);

        log('✅ Done! Fetching output...');
        const data = ffmpeg.FS('readFile', outputName);
        const url = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));

        outputVideo.src = url;
        log('🎉 Conversion complete.');
        convertBtn.disabled = false;
      });
    });
  </script>
  <style>
    body {
      background: #0d1117;
      color: #e6edf3;
      font-family: system-ui, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
     ...