videoWidth需在loadedmetadata事件后读取才有效，此时应同步设置canvas.width/height为真实分辨率，动态换源时须重绑事件，异常时用超时或readyState兜底。
VideoWidth 属性返回的是视频元素当前加载的视频资源的原始宽度（单位：像素），但它只有在视频元数据加载完成之后才可用。直接在 <video></video> 标签刚插入 DOM 时读取 video.videoWidth 很可能得到 0，因为此时视频尚未解析头信息。
确保元数据已加载再读取 videoWidth
必须等待 loadedmetadata 事件触发，这是获取准确原始分辨率的可靠时机：
- 该事件在浏览器成功解析视频容器头（包含宽高、时长、编码等）后触发
- 此时
video.videoWidth和video.videoHeight才有有效值 - 比
canplay或canplaythrough更早，也比load更轻量
同步设置 canvas 尺寸匹配原始分辨率
获取到真实宽高后，应立即将 canvas 的 width 和 height 属性设为对应值（注意：不是 CSS 样式）：
-
canvas.width = video.videoWidth;—— 设置绘图上下文的逻辑分辨率 -
canvas.height = video.videoHeight;—— 影响实际渲染像素数量 - 避免仅改 CSS，否则会导致图像拉伸或模糊（canvas 内容被缩放）
处理动态源切换或重新加载场景
若视频源通过 JavaScript 动态更改（如 video.src = 'new.mp4'），需重新监听 loadedmetadata：
立即学习“前端免费学习笔记（深入）”；
- 每次赋值新
src后，旧的元数据失效，videoWidth重置为 0 - 建议移除旧监听器并绑定新的，或使用事件委托+条件判断
- 可封装成函数，例如：
setupCanvasForVideo(video, canvas)
兼容性与兜底策略
极少数情况下（如损坏视频、不支持格式、CORS 限制），loadedmetadata 可能不触发，或 videoWidth 仍为 0：
- 添加超时检测（如 5 秒后 fallback 到默认尺寸或 video.clientWidth）
- 检查
video.readyState >= HTMLMediaElement.HAVE_METADATA作为辅助判断 - 对无音频/纯黑帧视频，某些浏览器可能延迟触发，需结合
durationchange或timeupdate观察
