https://www.hackdemo.win/_next/static/chunks/240.7d754e27dc468624.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[240],{7240:function(e,s,t){t.r(s),t.d(s,{default:function(){return i}});var r=t(7437),a=t(7648);function i(){return(0,r.jsxs)("article",{className:"space-y-6 text-sm leading-relaxed text-gray-600",children:[(0,r.jsx)("section",{children:(0,r.jsxs)("p",{className:"mt-2",children:["You've recorded a great product demo. But when you upload it, the text is blurry and the UI elements are unreadable. The culprit is almost always ",(0,r.jsx)("strong",{children:"wrong export settings"}),". Here's exactly how to export crisp, professional demo videos — whether you're using HackDemo's built-in exporter or a manual FFmpeg pipeline."]})}),(0,r.jsxs)("section",{children:[(0,r.jsx)("h2",{className:"text-lg font-semibold text-gray-900",children:"Resolution: Always Export at 1080p"}),(0,r.jsx)("p",{className:"mt-2",children:(0,r.jsx)("strong",{children:"Recommendation: 1920\xd71080 (Full HD)."})}),(0,r.jsxs)("p",{className:"mt-2",children:["Product demos contain text — button labels, menu items, input fields. At 720p, small UI text becomes illegible, especially on mobile screens. 4K is overkill and produces massive files. ",(0,r.jsx)("strong",{children:"1080p is the sweet spot"}),": sharp text, reasonable file sizes, and universal playback support."]}),(0,r.jsx)("p",{className:"mt-2",children:"If your screen recording is captured at a different resolution (e.g., a 1440p monitor), scale it to 1920\xd71080 during export — don't change the aspect ratio mid-video."})]}),(0,r.jsxs)("section",{children:[(0,r.jsx)("h2",{className:"text-lg font-semibold text-gray-900",children:"Bitrate: The #1 Setting That Determines Quality"}),(0,r.jsx)("div",{className:"mt-3 overflow-x-auto",children:(0,r.jsxs)("table",{className:"w-full text-left text-sm",children:[(0,r.jsx)("thead",{children:(0,r.jsxs)("tr",{className:"border-b border-gray-200",children:[(0,r.jsx)("th",{className:"py-2 pr-4 font-semibold text-gray-900",children:"Use Case"}),(0,r.jsx)("th",{className:"py-2 pr-4 font-semibold text-gray-900",children:"Recommended Bitrate (H.264)"}),(0,r.jsx)("th",{className:"py-2 font-semibold text-gray-900",children:"File Size (3 min)"})]})}),(0,r.jsx)("tbody",{className:"divide-y divide-gray-100",children:[["Web sharing (social media)","5–8 Mbps","~110–180 MB"],["Embedded on landing page","8–12 Mbps","~180–270 MB"],["Download / archive quality","12–16 Mbps","~270–360 MB"]].map(e=>{let[s,t,a]=e;return(0,r.jsxs)("tr",{children:[(0,r.jsx)("td",{className:"py-3 pr-4 font-medium text-gray-700",children:s}),(0,r.jsx)("td",{className:"py-3 pr-4 text-sm",children:t}),(0,r.jsx)("td",{className:"py-3 text-sm text-gray-400",children:a})]},s)})})]})}),(0,r.jsxs)("p",{className:"mt-2",children:["For product demos embedded on your landing page, ",(0,r.jsx)("strong",{children:"8–10 Mbps is the recommended target"}),". It balances visual quality with fast loading times for viewers."]})]}),(0,r.jsxs)("section",{children:[(0,r.jsx)("h2",{className:"text-lg font-semibold text-gray-900",children:"Codec: H.264 vs H.265"}),(0,r.jsxs)("p",{className:"mt-2",children:[(0,r.jsx)("strong",{children:"Use H.264 for maximum compatibility."})," H.265 (HEVC) produces ~30% smaller files at the same quality, but it's not universally supported in browsers yet — Safari supports it, Chrome and Firefox have inconsistent support. For a demo you're sending to customers, H.264 ensures it plays everywhere."]})]}),(0,r.jsxs)("section",{children:[(0,r.jsx)("h2",{className:"text-lg font-semibold text-gray-900",children:"Frame Rate: 30 FPS Is Enough"}),(0,r.jsxs)("p",{className:"mt-2",children:["Product demos are not action movies. Screen content changes slowly — clicks, scrolls, typing. ",(0,r.jsx)("strong",{children:"30 FPS is perfectly smooth"})," for demo videos and produces smaller files than 60 FPS. Only use 60 FPS if your demo involves smooth animations or drag-and-drop interactions where fluidity matters."]})]}),(0,r.jsxs)("section",{children:[(0,r.jsx)("h2",{className:"text-lg font-semibold text-gray-900",children:"Audio: Don't Overlook the Soundtrack"}),(0,r.jsxs)("p",{className:"mt-2",children:["If your demo includes AI narration or voiceover, encode audio at ",(0,r.jsx)("strong",{children:"AAC 128 kbps"}),". This is the standard for web video — it preserves voice clarity without bloating the file. For demos without narration, consider adding background music at a low volume to keep the video engaging."]})]}),(0,r.jsxs)("section",{children:[(0,r.jsx)("h2",{className:"text-lg font-semibold text-gray-900",children:"FFmpeg Command for Manual Export"}),(0,r.jsx)("p",{className:"mt-2",children:"If you're exporting manually, here's the FFmpeg command that produces optimal results:"}),(0,r.jsx)("pre",{className:"mt-2 rounded-lg bg-gray-900 p-4 text-xs text-green-400 overflow-x-auto",children:'ffmpeg -i input.mov \\\n  -vf "scale=1920:1080:force_original_aspect_ratio=decrease,pad=1920:1080:(ow-iw)/2:(oh-ih)/2" \\\n  -c:v libx264 -preset medium -crf 20 -b:v 8M \\\n  -c:a aac -b:a 128k \\\n  -r 30 \\\n  output.mp4'}),(0,r.jsxs)("p",{className:"mt-2 text-xs text-gray-400",children:[(0,r.jsx)("code",{children:"-crf 20"})," is the quality setting (lower = better, 18–23 is the sweet spot). ",(0,r.jsx)("code",{children:"-preset medium"}

1)," balances encoding speed with compression efficiency."]})]}),(0,r.jsxs)("section",{children:[(0,r.jsx)("h2",{className:"text-lg font-semibold text-gray-900",children:"The HackDemo Approach: One-Click Export"}),(0,r.jsx)("p",{className:"mt-2",children:'HackDemo handles all of this automatically. When you click "Generate Video" on your demo page, the platform applies optimized FFmpeg settings — 1080p resolution, H.264 encoding, 30 FPS, AAC audio — and delivers a web-optimized MP4 ready to share or embed. No manual configuration required.'}),(0,r.jsxs)("p",{className:"mt-2",children:["If you need ",(0,r.jsx)(a.default,{href:"/blog/how-to-create-product-demo-best-practices",className:"text-hack-primary hover:underline",children:"more demo creation tips"}),", check our best practices guide for the full workflow."]}),(0,r.jsxs)("p",{className:"mt-4 rounded-xl bg-gray-50 px-4 py-3 text-sm",children:[(0,r.jsx)("strong",{children:"Export your first demo free —"})," new users get ",(0,r.jsx)("strong",{children:"$0.50 in credits"}),". No credit card required."," ",(0,r.jsx)("a",{href:"https://chromewebstore.google.com/detail/hackdemo-%E2%80%94-ai-demo-record/dlkbndgmhlmddbihhjilapjncpbenhkj",target:"_blank",rel:"noopener noreferrer",className:"font-medium text-hack-primary hover:underline",children:"Get started →"})]})]})]})}}}]);