JavaScript怎么判断HTML视频是否播放结束_JS监听HTML视频ended事件

在网页交互开发中，判断HTML视频是否播放结束是常见需求，比如视频播放完后自动跳转下一集、展示推荐内容或者触发埋点统计，这些都可以通过监听video元素的ended事件实现。

基础实现：监听ended事件

HTML的<video>元素原生支持ended事件，当视频播放到末尾时会自动触发这个事件，我们只需要给video元素添加对应的事件监听器即可。

首先准备一个基础的video元素：

<video id="myVideo" controls width="600">
  <source src="test.mp4" type="video/mp4">
  您的浏览器不支持video标签
</video>

接下来通过JavaScript获取video元素，绑定ended事件：

// 获取video元素
const videoElement = document.getElementById('myVideo');

// 监听ended事件
videoElement.addEventListener('ended', function() {
  console.log('视频已经播放结束');
  // 这里可以写播放结束后的逻辑，比如切换下一个视频
  alert('当前视频播放完成，即将播放下一个视频');
});

常见应用场景示例

场景1：视频结束后自动播放下一个

如果有多个视频需要顺序播放，可以在ended事件触发后切换video的src地址：

const videoList = ['video1.mp4', 'video2.mp4', 'video3.mp4'];
let currentIndex = 0;
const videoElement = document.getElementById('myVideo');

// 初始化第一个视频
videoElement.src = videoList[currentIndex];

videoElement.addEventListener('ended', function() {
  currentIndex++;
  if (currentIndex < videoList.length) {
    videoElement.src = videoList[currentIndex];
    videoElement.play();
  } else {
    console.log('所有视频已经播放完成');
  }
});

场景2：播放结束后显示推荐内容

可以在视频结束后隐藏视频容器，展示相关推荐的区域：

const videoElement = document.getElementById('myVideo');
const videoContainer = document.getElementById('videoContainer');
const recommendContainer = document.getElementById('recommendContainer');

videoElement.addEventListener('ended', function() {
  // 隐藏视频区域
  videoContainer.style.display = 'none';
  // 显示推荐区域
  recommendContainer.style.display = 'block';
});

注意事项

• 部分旧版本浏览器可能不支持addEventListener语法，如果需要兼容可以用attachEvent替代，不过现在大部分现代浏览器都支持标准写法，非必要无需额外处理。
• 如果视频是通过动态修改src加载的，要确保src赋值完成后再绑定ended事件，避免事件漏绑。
• ended事件只有在视频正常播放到末尾时才会触发，如果用户手动拖动进度条到末尾，也会触发该事件，不需要额外做边界判断。

注意：如果视频存在循环播放属性autoplay或者loop，loop属性会让视频循环播放，不会触发ended事件，需要移除loop属性才能正常监听播放结束。

总结

判断HTML视频是否播放结束的核心就是监听video元素的ended事件，实现方式简单且兼容性好，开发者可以根据实际需求在事件回调里添加对应的业务逻辑，满足不同的交互场景。只要掌握这个基础方法，就能轻松处理所有和视频播放结束相关的需求。

JavaScriptvideo_ended_eventHTML_videoJS_event_listener修改时间：2026-05-25 11:02:59