移动端Chrome与Safari中Video ended事件未触发问题排查

看起来你碰到了移动端视频事件兼容性的典型坑，我来帮你拆解下问题根源和可行的解决方案：

核心问题分析 #

你的代码每次点击视频都会调用playVideo()，而每次调用都会给视频新增一个ended事件监听——这不仅会导致重复触发跳转，更关键的是移动端浏览器的事件机制、视频播放交互规则和桌面端有差异，你的事件绑定时机不对，加上部分移动端浏览器的严格限制，才导致ended事件没被捕获。

具体解决方案 #

1. 提前绑定事件，避免重复绑定 #

不要在点击事件里反复添加监听，而是在页面加载完成后一次性绑定ended事件，确保事件始终有效且不会重复触发：

// 页面加载完成后初始化视频相关逻辑
document.addEventListener('DOMContentLoaded', function() {
  const video = document.getElementById('video');
  
  // 一次性绑定ended事件，确保只生效一次
  video.addEventListener('ended', function() {
    console.log('视频播放结束，准备跳转');
    window.location.href = 'appt.html';
  });

  // 点击事件仅负责触发播放，避免重复绑定逻辑
  video.addEventListener('click', function() {
    // 先判断视频状态，避免重复触发播放请求
    if (video.paused || video.ended) {
      // 捕获可能的播放失败（比如用户拒绝授权）
      video.play().catch(err => {
        console.error('视频播放失败:', err);
      });
    }
  });
});

2. 修复HTML标签语法问题 #

你的<video>标签未闭合，这可能在移动端浏览器导致渲染异常，间接影响事件触发：

<video controls id="video" width="100%">
  <source src="./advisors/intro.mp4" type="video/mp4" />
</video> <!-- 补充闭合标签 -->

3. 适配移动端浏览器特殊规则 #

• Safari移动端：部分版本的Safari在视频播放结束后，控件交互（比如用户误触重播）可能干扰ended事件，你可以通过timeupdate事件辅助判断播放状态：

video.addEventListener('timeupdate', function() {
  // 留0.1秒误差，避免因视频时长精度问题错过判断
  if (video.currentTime >= video.duration - 0.1) {
    window.location.href = 'appt.html';
  }
});

• Chrome/iOS Safari：添加playsinline属性，避免视频自动进入全屏模式——全屏状态下部分事件可能会丢失：

<video controls id="video" width="100%" playsinline>
  <source src="./advisors/intro.mp4" type="video/mp4" />
</video>

额外排查小技巧 #

可以在ended事件里添加console.log，通过移动端浏览器的调试工具查看事件是否真的触发，方便快速定位问题。

内容的提问来源于stack exchange，提问作者user1724365