如何准确获取 HTML Video 元素中视频内容的实际渲染尺寸-html教程-PHP中文网

如何准确获取 HTML Video 元素中视频内容的实际渲染尺寸

本文详解如何在 CSS object-fit 和 object-position 影响下，精确计算元素内视频帧（而非容器）在页面上的真实渲染宽高与位置，避免误用 videoWidth、clientHeight 或 getBoundingClientRect() 等易错属性。

本文详解如何在 css `object-fit` 和 `object-position` 影响下，精确计算 `

在 Web 开发中，获取

✅ 正确前提：确保元数据已加载

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 获取“渲染后视频内容的边界框”，需根据以下三要素手动推算：

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

容器尺寸：通过 getBoundingClientRect() 获取
原始尺寸：从 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  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 模拟）；
扩展性：函数设计为通用媒体元素适配器，同样适用于、