异常教程

HTML DOM Video height 属性（长文解析）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言：视频元素与DOM属性的重要性

在现代Web开发中，视频内容已成为用户体验的重要组成部分。无论是教学网站、电商详情页，还是社交媒体平台，视频元素的灵活控制直接影响页面的视觉效果和交互体验。HTML DOM（文档对象模型）为开发者提供了直接操作HTML元素的接口，而height属性正是控制视频高度的核心工具之一。

本文将从基础概念出发，逐步深入讲解<video>元素的height属性，结合实际案例和代码示例，帮助开发者掌握如何通过DOM动态调整视频高度，并解决常见问题。无论你是编程新手还是有一定经验的开发者，都能通过本文找到适合自己的学习路径。

一、HTML Video元素与DOM属性基础

1.1 Video元素的HTML语法

在HTML中，<video>元素用于嵌入视频内容。其基本语法如下：

<video src="video.mp4" controls></video>

其中，height属性用于定义视频的高度。例如：

<video src="video.mp4" height="360" controls></video>

此时，视频的固定高度为360像素。

1.2 DOM属性与HTML属性的区别

需要特别注意的是，height属性在HTML和DOM中的表现方式不同：

  • HTML属性：直接写在<video>标签中，如height="360"。
  • DOM属性：通过JavaScript访问或修改，如videoElement.height = 360。

两者的区别在于：

  • HTML属性的值必须是字符串（如"360"），而DOM属性的值是数值类型（如360）。
  • DOM属性会实时反映元素的当前高度，即使通过CSS修改了高度，DOM属性也会同步更新。

比喻：可以将HTML属性比作“设计图纸”，而DOM属性则是“实时监控仪”。前者定义初始状态，后者反映动态变化。

二、height属性的用法详解

2.1 固定高度设置

设置固定高度是最基础的用法。例如，将视频高度固定为屏幕高度的50%：

<video id="myVideo" src="video.mp4" style="height: 50vh;" controls></video>

但通过DOM操作设置固定高度时，需注意单位：

document.getElementById("myVideo").height = 360; // 单位为像素

2.2 动态高度调整

结合JavaScript，可以实现高度的动态调整。例如，通过按钮控制视频高度：

<button onclick="adjustHeight()">调整高度</button>
<script>
  function adjustHeight() {
    const video = document.getElementById("myVideo");
    video.height = Math.random() * 400; // 随机生成0-400像素的高度
  }
</script>

此示例中，每次点击按钮都会随机改变视频高度，直观展示了DOM属性的动态特性。

三、height属性的高级用法与最佳实践

3.1 结合CSS实现响应式布局

虽然height属性可以直接设置数值，但响应式设计更推荐使用CSS配合JavaScript。例如：

<video id="responsiveVideo" src="video.mp4" class="responsive" controls></video>

配合CSS：

.responsive {
  width: 100%;
  height: auto; /* 保持宽高比 */
}

此时，若需动态调整高度，可通过修改CSS变量或内联样式：

document.querySelector(".responsive").style.height = "80vh";

3.2 处理宽高比失真问题

当单独设置height属性而不调整width时，可能导致视频变形。此时可通过以下方式保持宽高比：

const video = document.getElementById("myVideo");
const aspectRatio = video.videoWidth / video.videoHeight;
video.height = 360; // 设置高度
video.width = aspectRatio * 360; // 自动计算宽度

比喻：这如同在相框中调整照片大小，既要改变尺寸，又要保持照片的原始比例。

四、常见问题与解决方案

4.1 单位问题：像素 vs 百分比

  • 像素（px）：适用于固定布局，例如：video.height = 360。
  • 百分比（%）：需结合CSS，例如： 
    #myVideo {
  height: 50%;
}

    此时DOM的height属性将返回计算后的像素值，而非百分比。

4.2 动态加载视频后的高度问题

若视频通过JavaScript动态加载，需等待视频元数据加载完成后再获取高度：

const video = document.getElementById("myVideo");
video.addEventListener("loadedmetadata", () => {
  console.log("原始高度:", video.videoHeight);
  video.height = video.videoHeight * 0.8; // 调整为原始高度的80%
});

4.3 跨浏览器兼容性

现代浏览器（Chrome、Firefox、Safari等）均支持height属性，但需注意：

  • 在旧版IE中，可能需要通过style.height属性设置。
  • 动态调整高度时，确保元素已完全渲染，避免出现0像素问题。

五、实战案例：自适应视频播放器

5.1 需求分析

创建一个根据窗口大小自适应高度的视频播放器，同时保持宽高比。

5.2 实现步骤

  1. HTML结构： 
    <div class="video-container">
  <video id="adaptiveVideo" src="video.mp4" controls></video>
</div>
  2. CSS布局： 
    .video-container {
  width: 100%;
  position: relative;
  padding-top: 56.25%; /* 16:9宽高比 */
}
#adaptiveVideo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
  3. JavaScript动态调整： 
    function adjustVideoHeight() {
  const container = document.querySelector(".video-container");
  const video = document.getElementById("adaptiveVideo");
  const containerHeight = container.offsetHeight;
  video.height = containerHeight;
  video.width = (containerHeight / 9) * 16; // 保持16:9比例
}
window.addEventListener("resize", adjustVideoHeight);
adjustVideoHeight(); // 初始化

此案例中，视频容器通过CSS的padding-top模拟宽高比，JavaScript则根据窗口大小动态调整视频的像素高度和宽度，确保响应式效果。

六、总结与扩展方向

6.1 核心知识点回顾

  • height属性通过HTML或DOM控制视频高度。
  • 结合CSS和JavaScript可实现动态、响应式布局。
  • 注意宽高比、单位类型及浏览器兼容性问题。

6.2 进阶学习建议

  • 学习DOM API：探索video元素的其他属性（如width、currentTime）。
  • CSS动画：尝试通过CSS过渡动画平滑调整视频高度。
  • 移动端适配：研究如何为不同设备优化视频高度设置。

通过本文的学习，开发者不仅能掌握HTML DOM Video height 属性的具体用法，还能理解DOM操作与HTML/CSS的协同作用。在实际项目中，结合用户需求灵活运用这些技术，可以显著提升视频内容的交互体验。

最新发布

查看更多文章