Convert the full 10min Big Buck Bunny movie from MP4 to WebM. Needs

index.html

<!-- Does not work with file:// protocol -->
<!-- You need to serve this via localhost, e.g `npx serve .` -->

<script type="importmap">
  {
    "imports": {
      "@remotion/media-parser/web-fs": "https://unpkg.com/@remotion/[email protected]/dist/esm/web-fs.mjs",
      "@remotion/media-parser/buffer": "https://unpkg.com/@remotion/[email protected]/dist/esm/buffer.mjs",
      "@remotion/media-parser": "https://unpkg.com/@remotion/[email protected]/dist/esm/index.mjs",
      "webcodecs": "https://unpkg.com/@remotion/[email protected]/dist/esm/index.mjs"
    }
  }
</script>

<button>Convert video</button>
<div id="progress">Progress =</div>
<script type="module">
  import { convertMedia } from "webcodecs";

  const button = document.querySelector("button");
  button.addEventListener("click", async () => {
    const fn = await convertMedia({
      src: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
      onMediaStateUpdate: (s) => {
        const progress = document.querySelector("#progress");
        progress.innerText = `Progress = ${JSON.stringify(s)}`;
      },
      videoCodec: "vp9",
      audioCodec: "opus",
      to: "webm",
    });
    const file = await fn.save();
    const a = document.createElement("a");
    a.href = URL.createObjectURL(file);
    a.download = "hithere";
    a.click();
  });
</script>