videoHeight 是视频原始媒体文件的像素高度,不随渲染变化;要获取渲染真实高度,需用 getBoundingClientRect().width 按原始宽高比推算,或直接读取 offsetHeight。

videoHeight 是 video 元素的只读属性,返回的是视频**原始媒体文件**的像素高度(即编码分辨率),不是它在页面上渲染出来的实际高度。所以它本身不直接等于渲染时的真实高度,但可以作为关键依据,配合其他信息推算出渲染高度。
videoHeight 的本质和限制
videoHeight 只在视频元数据加载完成后才可用,值来自视频文件头信息,与浏览器如何显示它无关。例如一个 1920×1080 的 MP4 文件,无论你把它缩放到 300px 宽还是全屏,video.videoHeight 始终是 1080。
- 它不随 CSS 缩放、父容器尺寸或窗口变化而改变
- 它不能通过
getBoundingClientRect()或offsetHeight获取——那些返回的是渲染后尺寸 - 必须监听
loadedmetadata事件才能安全读取,否则可能为 0
如何得到“渲染时的真实高度”
要获得视频在页面中当前显示的高度(即用户看到的像素高度),需结合 videoHeight、videoWidth 和实际渲染宽度(或容器约束)来计算比例缩放结果:
- 先获取原始宽高:
const w = video.videoWidth; const h = video.videoHeight; - 再获取当前渲染宽度:比如
video.getBoundingClientRect().width或video.offsetWidth - 按原始长宽比推算渲染高度:
renderedHeight = (renderedWidth / w) * h
这个公式成立的前提是视频未被拉伸变形(即使用 object-fit: contain 或 cover,且父容器有明确尺寸)。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面,使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力: - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面; - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”; - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记(深入)”;
常见场景下的处理方式
不同布局策略下,“真实渲染高度”的含义和获取逻辑略有差异:
-
固定宽高比 + 自适应容器:设父容器
height: 50vh,video 设置width: 100%; height: auto; object-fit: cover;,此时渲染高度由容器高度决定,可直接用video.offsetHeight -
铺满容器(cover 模式):父容器有明确宽高,video 设
width: 100%; height: 100%; object-fit: cover;,则渲染高度 = 父容器高度,但可见区域可能被裁剪 -
响应式等比缩放:监听
resize,用video.videoWidth / video.videoHeight计算原始比例,再根据窗口宽度动态设置 video 的style.height,确保不失真
推荐的完整获取流程
以下代码可在视频加载完成并渲染后,准确拿到当前显示高度:
const video = document.getElementById('myVideo');
video.addEventListener('loadedmetadata', () => {
const naturalW = video.videoWidth;
const naturalH = video.videoHeight;
const rect = video.getBoundingClientRect();
const renderedW = rect.width;
const renderedH = (renderedW / naturalW) * naturalH;
<p>console.log('原始高度:', naturalH);
console.log('渲染宽度:', renderedW);
console.log('推算渲染高度:', renderedH);
console.log('实际 offsetHeight:', video.offsetHeight);
});注意:offsetHeight 和 getBoundingClientRect().height 是最直接的“真实渲染高度”,而 videoHeight 是用来理解缩放逻辑和做比例控制的基础。


















