HTML5 <video>标签loop属性导致onended事件失效问题求助

我来帮你搞定这个痛点！你遇到的问题很典型：用loop属性虽然能避免手动重播的闪烁，但会直接跳过onended事件导致无法控制播放次数；而手动监听onended重播又容易出现加载闪烁。下面给你两个针对性的解决方案：

方案一：移除loop属性，手动计数+无缝重播（推荐） #

这个方案从根源解决闪烁问题，同时精准控制播放次数。核心是预加载视频+直接重置播放位置而非重新加载，避免重播时的加载间隙。

步骤1：修改HTML（移除loop，添加预加载） #

<video id="video1" width="100%" poster="img/aImg.png" style="height: 35vh;" autoplay webkit-playsinline playsinline preload="auto">
  <source src={{myVideo}} type="video/mp4">
</video>

• preload="auto"：让浏览器提前加载视频资源，减少重播时的等待时间
• 删掉loop属性，把控制权交给JS

步骤2：JS监听事件控制播放次数 #

const video = document.getElementById('video1');
let playCount = 0;
const targetPlays = 7; // 目标播放次数

// 监听视频结束事件
video.addEventListener('ended', () => {
  playCount++;
  if (playCount < targetPlays) {
    // 直接重置播放位置并播放，无加载闪烁
    video.currentTime = 0;
    // 处理浏览器自动播放限制，play()返回Promise
    video.play().catch(err => {
      console.error('重播失败:', err);
      // 可选：如果自动播放被阻止，可以在这里添加用户交互触发逻辑
    });
  } else {
    // 达到次数后的操作：暂停+恢复海报（可选）
    video.pause();
    video.load(); // 加载海报图
  }
});

// 初始播放也算一次，避免计数偏差
video.addEventListener('play', () => {
  if (playCount === 0) {
    playCount = 1;
  }
});

方案二：保留loop属性，用timeupdate事件计数（特殊场景用） #

如果你的业务场景必须保留loop属性，可以通过监听timeupdate事件检测视频接近结束的时机，从而统计播放次数。

const video = document.getElementById('video1');
let playCount = 0;
const targetPlays = 7;
const endThreshold = 0.5; // 距离视频结束0.5秒时触发计数

video.addEventListener('timeupdate', () => {
  // 当视频接近结束且未暂停时，计数一次
  if (video.duration - video.currentTime <= endThreshold && !video.paused) {
    playCount++;
    if (playCount >= targetPlays) {
      video.pause();
      video.removeAttribute('loop'); // 移除loop防止继续循环
      video.currentTime = 0; // 重置到开头
    }
  }
});

⚠️ 注意：timeupdate事件会频繁触发（每秒多次），性能消耗比onended略高，适合单个视频的场景。

额外小贴士 #

• 测试时注意浏览器的自动播放政策：如果视频没有用户交互触发，play()可能会失败，建议在用户点击等交互事件中初始化播放逻辑
• 如果视频文件较大，preload="auto"可能会增加初始加载时间，可以根据需求调整为preload="metadata"只加载元数据

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