首页
/ 正文

HTML DOM Video ended 属性（超详细）

更新时间: 2025-04-01 10:57:18

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

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

新开坑项目:《Spring AI 项目实战》 正在持续爆肝中，基于 Spring AI + Spring Boot 3.x + JDK 21...， 点击查看 ;

《从零手撸：仿小红书（微服务架构）》 已完结，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;

《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

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

前言

在现代网页开发中，视频内容已成为传递信息和增强用户体验的重要手段。无论是教学网站、电商详情页，还是社交媒体平台，视频元素的交互控制都是开发者需要掌握的核心技能之一。本文将聚焦 HTML DOM Video ended 属性，通过理论结合实践的方式，深入讲解这一属性的功能、使用场景及进阶技巧。无论你是编程新手还是有一定经验的开发者，都能从中获得实用知识。

一、HTML DOM Video 对象与 ended 属性基础

1.1 视频元素与 DOM 的关系

HTML 中的 <video> 标签用于嵌入视频内容，而通过 DOM（文档对象模型），开发者可以动态控制视频的播放、暂停、时间进度等行为。DOM 提供了丰富的属性和方法，例如 play()、pause()、currentTime 等。

ended 属性 是其中的一个布尔值属性（返回 true 或 false），用于判断视频是否已到达播放结束状态。其核心作用是：

// 当视频播放结束时，返回 true
videoElement.ended;

1.2 形象比喻：ended 属性如同“终点线指示灯”

想象一个马拉松比赛的终点线：当运动员冲过终点时，计时器会亮起红灯表示比赛结束。类似地，ended 属性就像视频播放的终点信号灯，当视频播放到达最后一帧时，它会从 false 变为 true，开发者可以借此触发后续逻辑（如提示用户或跳转页面）。

二、ended 属性的核心功能与应用场景

2.1 基本功能解析

属性类型：布尔值（true 或 false）
触发条件：当视频播放到达自然结束点（即 currentTime 等于 duration）时，ended 值变为 true。

主动查询：开发者可以通过 JavaScript 直接读取该属性，例如：

const video = document.querySelector("video");
if (video.ended) {
  console.log("视频已播放完毕");
}

2.2 典型应用场景

场景 1：自动播放下一集视频

在视频网站中，当用户观看完当前集后，常需要自动跳转到下一集。通过监听 ended 属性变化，可以实现这一功能：

video.addEventListener("ended", function() {
  // 假设存在一个下一集的视频源
  this.src = "next_episode.mp4";
  this.load();
  this.play();
});

场景 2：播放结束时提示用户

例如在教程类网站中，视频结束后弹出“课程已完成”提示框：

video.onended = function() {
  alert("恭喜！您已学完本节课程");
};

场景 3：统计视频播放完成率

通过记录 ended 为 true 的次数，可以分析用户对视频内容的完整观看比例，这对优化内容策略很有帮助。

三、代码实践：从基础到进阶

3.1 基础案例：检测视频是否播放结束

HTML 结构

<video id="myVideo" controls>
  <source src="example.mp4" type="video/mp4">
</video>
<button onclick="checkVideoState()">检查状态</button>

JavaScript 逻辑

function checkVideoState() {
  const video = document.getElementById("myVideo");
  if (video.ended) {
    console.log("视频已播放完毕");
  } else {
    console.log("视频正在播放中");
  }
}

3.2 进阶案例：结合其他属性实现循环播放

若想让视频循环播放，通常使用 loop 属性即可。但若需在循环时执行额外操作（例如更新 UI），可以结合 ended 属性：

video.addEventListener("ended", function() {
  // 在循环前执行自定义逻辑
  this.currentTime = 0; // 重置时间到开头
  this.play(); // 重新播放
});

3.3 常见误区与解决方案

误区 1：混淆 ended 属性与 ended 事件

ended 属性 是一个静态值，需主动查询。

ended 事件 是一个动态触发的事件，当视频结束时自动执行绑定的回调函数。

// 正确示例：使用事件监听而非轮询属性
video.addEventListener("ended", handleEnd);

误区 2：忽略视频未加载完成的情况

如果视频尚未加载完毕就检查 ended，可能得到错误结果。此时需结合 loadedmetadata 事件确保元数据已加载：

video.addEventListener("loadedmetadata", function() {
  console.log("视频时长：" + this.duration + " 秒");
});

四、深入探讨：ended 属性的底层原理与兼容性

4.1 技术原理简析

ended 属性的值由浏览器的媒体播放引擎实时维护。当视频播放到达 duration（总时长）时，浏览器会将 ended 设置为 true，并触发 ended 事件。这一机制确保了前端逻辑与底层媒体播放的同步性。

4.2 浏览器兼容性

主流浏览器（Chrome、Firefox、Safari、Edge）均支持 ended 属性，兼容性良好。
对于老旧浏览器（如 IE 11），需通过 ended 事件的兼容性处理，或使用 Polyfill（备用方案）。

五、扩展应用：结合其他 DOM 方法增强功能

5.1 与 currentTime 和 duration 的联动

通过 currentTime（当前播放时间）和 duration（总时长），可以实现更复杂的逻辑，例如在视频结束前 5 秒弹出提示：

video.addEventListener("timeupdate", function() {
  const remainingTime = this.duration - this.currentTime;
  if (remainingTime <= 5 && !this.ended) {
    console.log("视频将在 5 秒后结束");
  }
});

5.2 多视频场景下的状态管理

在页面包含多个视频时，需通过唯一标识符（如 id）或遍历节点来精准控制：

document.querySelectorAll("video").forEach(video => {
  video.addEventListener("ended", function() {
    console.log(`视频 ${this.id} 已播放完毕`);
  });
});

六、常见问题与解答

Q1：如何避免视频无限循环？

在循环播放时，需设置终止条件以防止无限循环：

let loopCount = 0;
video.addEventListener("ended", function() {
  if (loopCount < 3) { // 限制循环次数
    this.currentTime = 0;
    this.play();
    loopCount++;
  }
});

Q2：视频加载失败时，ended 会触发吗？

不会。若视频源地址错误或加载失败，ended 仍为 false。此时需通过 error 事件处理加载失败的情况：

video.addEventListener("error", function() {
  console.error("视频加载失败");
});

结论

HTML DOM Video ended 属性 是控制视频交互的核心工具之一，它为开发者提供了精准的播放状态判断能力。通过结合事件监听、时间控制和其他 DOM 方法，可以实现从基础提示到复杂交互的多样化功能。无论是自动播放下一集、统计用户行为，还是优化播放逻辑，掌握这一属性都能显著提升网页的交互体验。

建议读者通过实际编写代码加深理解，并尝试将 ended 属性与动画、表单提交等场景结合，探索更多可能性。掌握这类基础但实用的 DOM 属性，是成为一名专业前端开发者的重要一步。