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);
});</p>注意：offsetHeight 和 getBoundingClientRect().height 是最直接的“真实渲染高度”，而 videoHeight 是用来理解缩放逻辑和做比例控制的基础。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
