title: WebCodecs > VideoEncoder: Create video from encoded frames
body: <p>I would like to create a video file from multiple images uploaded to my site.</p>
  <p>Until now, what I do is take these images, draw them 1-by-1 on a canvas, and use the <code>MediaRecorder</code> API to record them. However, there is a lot of idle time.</p>
  <p>Instead, I want to use the <code>VideoEncoder</code> API.</p>
  <p>I created an encoder that saves every chunk as a buffer:</p>
  <pre class="lang-js prettyprint-override"><code>const chunks = [];
  
  let encoder = new VideoEncoder({
    output: (chunk) =&gt; {
      const buffer = new ArrayBuffer(chunk.byteLength)
      chunk.copyTo(buffer);
      chunks.push(buffer);
    },
    error: (e) =&gt; console.error(e.message)
  });
  </code></pre>
  <p>And configured it with my settings:</p>
  <pre class="lang-js prettyprint-override"><code>encoder.configure({
    codec: 'vp8',
    width: 256,
    height: 256,
    bitrate: 2_000_000,
    framerate: 25
  });
  </code></pre>
  <p>Then, I encode every image as a frame:</p>
  <pre class="lang-js prettyprint-override"><code>const frame = new VideoFrame(await createImageBitmap(image));
  encoder.encode(frame, {keyFrame: true});
  frame.close();
  </code></pre>
  <p>And finally, I try to create a video from it:</p>
  <pre class="lang-js prettyprint-override"><code>await encoder.flush();
  
  const blob = new Blob(chunks, {type: 'video/webm; codecs=vp8'});
  const url = URL.createObjectURL(blob);
  </code></pre>
  <p>However, that URL blob is unplayable. If I try to download it, VLC does not show it. If I set it as the source for a <code>video</code> element, I get:</p>
  <blockquote>
  <p>DOMException: The element has no supported sources.</p>
  </blockquote>
  <p>How do I encode multiple frames into a video that is playable?</p>
  <p>How do I know which codecs / blob types are supported?</p>
  <h2>Minimal Reproduction</h2>
  <p>The following codepen is the above code, concatenated and joined into a single function.
  <a href="https://codepen.io/AmitMY/pen/OJxgPoG?editors=0010" rel="noreferrer">https://codepen.io/AmitMY/pen/OJxgPoG?editors=0010</a></p>