本文详解如何在 CSS object-fit 和 object-position 影响下，精确计算 <video> 元素内视频帧（而非容器）在页面上的真实渲染宽高与位置，避免误用 videoWidth、clientHeight 或 getBoundingClientRect() 等易错属性。
本文详解如何在 css `object-fit` 和 `object-position` 影响下，精确计算 `
在 Web 开发中，获取 <video> 元素的“渲染尺寸”常被误解为获取其 DOM 容器大小（如 clientWidth）或原始媒体尺寸（如 videoWidth）。但实际需求往往是：当视频应用了 object-fit: cover、contain 或自定义 object-position 时，其像素内容在视口中的可视区域究竟有多大？左上角坐标在哪？ 这一信息对实现精准的视频标注、画布叠加、鼠标坐标映射、截图裁剪等高级交互至关重要。
✅ 正确前提：确保元数据已加载
video.videoWidth 和 video.videoHeight 并非始终可用——它们仅在视频元数据加载完成后才有效。若在 loadedmetadata 事件前读取，将返回 0。因此，所有计算必须绑定该事件：
const video = document.querySelector('video');
video.addEventListener('loadedmetadata', () => {
console.log('Intrinsic size:', video.videoWidth, '×', video.videoHeight);
// ✅ 此时可安全调用 getRenderedBox(video)
});? 核心原理：模拟 object-fit 渲染逻辑
浏览器未提供直接 API 获取“渲染后视频内容的边界框”，需根据以下三要素手动推算：
- 容器尺寸：通过 getBoundingClientRect() 获取 <video> 元素当前布局尺寸（含 CSS 缩放、边距影响）；
- 原始尺寸：从 video.videoWidth / video.videoHeight（推荐）或 video.naturalWidth / naturalHeight 获取；
- CSS 规则：通过 getComputedStyle(video).objectFit 和 .objectPosition 获取渲染策略与偏移。
getRenderedBox() 函数即基于此三要素，完整覆盖所有 object-fit 值（none、fill、contain、cover、scale-down）的数学计算逻辑，并支持百分比/关键词形式的 object-position（如 "center"、"20% 30%"）。
立即学习“前端免费学习笔记（深入）”；
? 实用代码：getRenderedBox() 函数（精简版）
function getResourceDimensions(source) {
if (source.videoWidth) return { width: source.videoWidth, height: source.videoHeight };
if (source.naturalWidth) return { width: source.naturalWidth, height: source.naturalHeight };
return null;
}
function parseObjectPosition(posStr, bbox, obj) {
const [x, y] = (posStr || 'center center').split(' ');
const parsePx = (val, dimBbox, dimObj) => {
const num = parseFloat(val);
return val.endsWith('%')
? (num / 100) * dimBbox - (num / 100) * dimObj
: isNaN(num) ? (dimBbox - dimObj) / 2 : num;
};
return {
left: parsePx(x, bbox.width, obj.width),
top: parsePx(y, bbox.height, obj.height)
};
}
function getRenderedBox(video) {
const style = getComputedStyle(video);
const bbox = video.getBoundingClientRect();
const obj = getResourceDimensions(video);
if (!obj) return null;
let { objectFit, objectPosition } = style;
const pos = parseObjectPosition(objectPosition, bbox, obj);
// 处理 scale-down：退化为 contain 或 none
if (objectFit === 'scale-down') {
objectFit = (bbox.width < obj.width || bbox.height < obj.height) ? 'contain' : 'none';
}
switch (objectFit) {
case 'none':
return { ...pos, width: obj.width, height: obj.height };
case 'fill':
return { left: 0, top: 0, width: bbox.width, height: bbox.height };
case 'contain': {
const ratioObj = obj.height / obj.width;
const ratioBox = bbox.height / bbox.width;
const width = ratioBox > ratioObj ? bbox.width : bbox.height / ratioObj;
const height = ratioBox > ratioObj ? bbox.width * ratioObj : bbox.height;
const { left, top } = parseObjectPosition(objectPosition, bbox, { width, height });
return { left, top, width, height };
}
case 'cover': {
const scale = Math.min(bbox.width / obj.width, bbox.height / obj.height);
const width = obj.width * scale;
const height = obj.height * scale;
const { left, top } = parseObjectPosition(objectPosition, bbox, { width, height });
return { left, top, width, height };
}
default:
return { left: 0, top: 0, width: bbox.width, height: bbox.height };
}
}? 使用示例：动态高亮渲染区域
const video = document.querySelector('video');
const witness = document.querySelector('.witness'); // 绝对定位的红色边框 div
function updateWitness() {
const box = getRenderedBox(video);
if (!box) return;
const rect = video.getBoundingClientRect();
witness.style.cssText = `
left: ${rect.left + box.left}px;
top: ${rect.top + box.top}px;
width: ${box.width}px;
height: ${box.height}px;
`;
}
// 监听尺寸变化与元数据加载
const ro = new ResizeObserver(updateWitness);
video.addEventListener('loadedmetadata', () => ro.observe(video), { once: true });
// 可选：监听 object-fit 动态变更
video.addEventListener('click', () => {
video.style.objectFit = video.style.objectFit === 'cover' ? 'contain' : 'cover';
updateWitness();
});⚠️ 注意事项与最佳实践
- 时机关键：务必等待 'loadedmetadata' 事件后再调用 getRenderedBox()，否则 videoWidth 为 0；
- 响应式适配：使用 ResizeObserver 监听容器尺寸变化（而非仅 window.resize），确保移动端旋转、弹性布局更新时仍准确；
- 性能提示：该计算为纯 JS 数学运算，无重排/重绘，可高频调用（如配合 requestAnimationFrame 做实时映射）；
- 兼容性：object-fit / object-position 在现代浏览器中已广泛支持（Chrome 32+、Firefox 36+、Safari 10+），旧版需降级处理（如回退至 background-size 模拟）；
- 扩展性：函数设计为通用媒体元素适配器，同样适用于 <img>、<canvas> 等具有 object-fit 的元素。
掌握这一方法，你便能真正穿透 CSS 渲染层，精准掌控视频内容在页面中的几何存在——这是构建专业级视频交互体验不可或缺的基础能力。
