<html>
<head>
  <script src="//cdn.jsdelivr.net/npm/@ffmpeg/ffmpeg@0.8.3/dist/ffmpeg.min.js"></script>
  <style>
    html,
    body {
      margin: 0;
      width: 100%;
      height: 100%
    }

    body {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  </style>
</head>

<body>
  <h3>Upload a video to transcode to mp4 (x264) and play!</h3>
  <video id="output-video" controls muted autoplay></video><br />
  <br>
  <input type="file" id="uploader">
  <p id="message"></p>
  <br>

  <div>
    <textarea id='log' rows=30 cols=100 autofocus></textarea>
  </div>

  <br>
  <script>
    var txt = document.getElementById('log');
    const {
      createFFmpeg
    } = FFmpeg;
    const ffmpeg = createFFmpeg({
      log: true,
      logger: ({
        message
      }) => {
        txt.value += "\n" + message;
      }
    });

    const transcode = async ({
      target: {
        files
      }
    }) => {
      const message = document.getElementById('message');
      const {
        name
      } = files[0];
      message.innerHTML = 'Loading ffmpeg-core.js';
      await ffmpeg.load();
      await ffmpeg.write(name, files[0]);
      message.innerHTML = 'Start transcoding';
      await ffmpeg.transcode(name, 'output.mp4');
      message.innerHTML = 'Transcoding completed';
      const data = ffmpeg.read('output.mp4');
      ffmpeg.remove('output.mp4');

      const video = document.getElementById('output-video');
      video.src = URL.createObjectURL(new Blob([data.buffer], {
        type: 'video/mp4'
      }));


    }
    const elm = document.getElementById('uploader');
    elm.addEventListener('change', transcode);
  </script>
</body>

</html>
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.