Get started with ffmpeg CDN

MIT licensed

FFmpeg JS: Multimedia processing for web apps.

Tags:
  • ffmpeg

Stable version

Copied!

How to start using ffmpeg CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with ffmpeg CDN - cdnhub.io</title>
</head>
<body>
    <h1>FFmpeg Example</h1>
    
    <input type="file" id="inputFile">
    <button onclick="convertToMP4()">Convert to MP4</button>

    <script src="https://cdn.cdnhub.io/ffmpeg/0.12.10/umd/ffmpeg.min.js"></script>
    <script>
        async function convertToMP4() {
            const inputFile = document.getElementById('inputFile').files[0];
            const outputFileName = 'output.mp4';

            const { createFFmpeg, fetchFile } = FFmpeg;
            const ffmpeg = createFFmpeg({ log: true });
            await ffmpeg.load();
            
            ffmpeg.FS('writeFile', inputfile.name, await fetchFile(inputFile));
            await ffmpeg.run('-i', inputFile.name, outputFileName);

            const data = ffmpeg.FS('readFile', outputFileName);
            const url = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));

            const videoElement = document.createElement('video');
            videoElement.src = url;
            videoElement.controls = true;

            document.body.appendChild(videoElement);
        }
    </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!

All versions