HTML video 元素无法导出视频，分辨率控制依赖 MediaStream 约束（如 {width: {ideal: 1280}, height: {ideal: 720}}）和 Canvas 显式设置宽高，而非 CSS 或标签属性。
HTML 本身不提供“视频导出”能力——video 元素只能播放，不能生成或保存视频文件。所谓“导出分辨率设置”，实际是前端配合后端或客户端工具（如 MediaRecorder、FFmpeg.wasm）完成录制 + 编码 + 下载的链路，而分辨率控制发生在录制或编码阶段，不是靠 HTML 标签属性。
MediaRecorder 录制时如何固定输出分辨率
浏览器原生支持的录制方式是 MediaRecorder，但它不接受分辨率参数；分辨率由输入的 MediaStream 决定。所以关键在 getUserMedia 约束里卡死尺寸：
- 必须显式传入
{ video: { width: { ideal: 1280 }, height: { ideal: 720 } } }，仅设width不设height可能被忽略 - 移动端尤其要注意：部分 Android 设备只支持特定组合（如 640×480、1280×720），
ideal不保证生效，建议加exact或 fallback 到min/max - 拿到 stream 后，用
videoTrack.getSettings()立即检查实际分辨率，避免“以为设了 1080p，结果录出来是 480p”
Canvas 拍照导出高分辨率图时的常见失真点
用 drawImage 从 video 抓帧再转 toDataURL，看似简单，但分辨率常被悄悄降级：
-
canvas.width和canvas.height必须显式设为目标像素值（如1920、1080），不能只靠 CSS 缩放 - 直接
ctx.drawImage(video, 0, 0)会按 video 元素当前渲染尺寸绘制，而非原始流分辨率——要先读video.videoWidth/video.videoHeight - iOS Safari 需额外处理 devicePixelRatio：canvas 内部宽高 ×
window.devicePixelRatio，再用 CSS 缩回 1:1，否则模糊
响应式页面中嵌入视频时的“伪导出分辨率”陷阱
很多开发者误以为给 video 加 width="1080" 或 CSS max-width: 1080px 就是“导出 1080p”，其实完全无关：
- 这些只是控制显示尺寸，不影响源文件分辨率；用户右键“另存为”下载的仍是原始 MP4 文件
- 真正影响最终画质的是
- 想实现“根据屏幕选分辨率”，得用 JS 动态切换
video.src，或服务端根据 UA + 屏幕宽度返回不同 CDN 地址
真正的视频导出逻辑不在 HTML 层，而在于你用什么工具链：MediaRecorder 只能录屏流，FFmpeg.wasm 能做转码但吃 CPU，桌面端 Electron 才可能调用系统编码器。最容易被忽略的一点是——所有前端方案都无法绕过浏览器对摄像头原始分辨率的限制，getCapabilities() 返回的 max 值，就是你实际能拿到的上限。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
