diff --git a/public/assets/scripts/main.js b/public/assets/scripts/main.js index c72e33b..513191a 100644 --- a/public/assets/scripts/main.js +++ b/public/assets/scripts/main.js @@ -21,31 +21,31 @@ async function compress() { console.log("[ffmpeg]", event.type, event.message); }); - let pass = 1; - - updateProgress(0, pass); + updateProgress(0); ffmpeg.on("progress", event => { - updateProgress(event.progress, pass); + updateProgress(event.progress); }); await ffmpeg.load({ coreURL: "/assets/scripts/core/package/dist/umd/ffmpeg-core.js" }); await ffmpeg.writeFile(file.name, await readFromBlob(file)); - // Use Two-Pass to create a video file with desired file size - // https://trac.ffmpeg.org/wiki/Encode/H.264#twopass + // Calculate target bitrate to create a video file with desired file size (https://trac.ffmpeg.org/wiki/Encode/H.264#twopass) + let bitrate = targetFilesize / videoLength; + bitrate -= 128; // Subtract audio bitrate + bitrate -= (bitrate / 100) * 5; // Subtract 5% to compensate for overhead + bitrate = Math.floor(bitrate); - const bitrate = Math.floor(targetFilesize / videoLength) - 128; // Subtract audio bitrate + if (bitrate <= 0) { + showSection("file-picker"); + alert("Selected file size is too low for this video"); + + return; + } console.debug("Target bitrate:", bitrate, "Video length:", videoLength); - const options = ["-i", file.name, "-preset", "ultrafast", "-c:v", "libx264", "-b:v", bitrate + "k"]; - - await ffmpeg.exec([...options, "-pass", "1", "-vsync", "cfr", "-f", "null", "/dev/null"]); - - pass = 2; - - await ffmpeg.exec([...options, "-pass", "2", "-c:a", "copy", "-b:a", "128k", "compressed.mp4"]); + await ffmpeg.exec(["-i", file.name, "-preset", "ultrafast", "-c:v", "libx264", "-b:v", bitrate + "k", "-c:a", "copy", "-b:a", "128k", "compressed.mp4"]); const video = await ffmpeg.readFile("compressed.mp4"); @@ -60,10 +60,9 @@ function cancel() { showSection("file-picker"); } -function updateProgress(progress, pass) { +function updateProgress(progress) { const percent = (progress * 100).toFixed(1) + "%"; - document.getElementById("progress-step-value").innerText = pass; document.getElementById("progress-percentage").innerText = percent; document.getElementById("progress-indicator").style.clipPath = `rect(0 ${percent} 100% 0)`; } diff --git a/public/assets/style/main.css b/public/assets/style/main.css index 9422edb..2799223 100644 --- a/public/assets/style/main.css +++ b/public/assets/style/main.css @@ -180,7 +180,7 @@ label { height: 2rem; max-width: 500px; border-radius: 2rem; - margin: auto; + margin: 3rem auto auto; background-color: #E0E0E0; position: relative; } @@ -198,9 +198,3 @@ label { font-weight: bold; font-size: 1.2rem; } - -#progress-step { - font-weight: bold; - margin-top: 3rem; - margin-bottom: 0.5rem; -} diff --git a/public/index.html b/public/index.html index 7a82845..b24085a 100644 --- a/public/index.html +++ b/public/index.html @@ -39,7 +39,6 @@

Please wait...

Your video is being compressed. This may take a while.

-

Step 1/2