视频播放完成后进度条显示异常及变量未更新问题求助

核心问题 #

1. 局部变量重置：video1、video2是light函数内的局部变量，每次点击切换视频调用函数时，这两个变量都会被重新初始化为false，之前在timeupdate里修改的值完全无效。
2. 百分比判断精度问题：用percentage === 100判断播放完成不可靠，因为浮点数计算可能出现99.999999这样的数值，永远达不到精确的100。
3. 事件重复绑定：每次切换视频都会新增一个timeupdate事件监听，导致同一事件被触发多次，逻辑混乱。
4. 进度条状态未实时更新：即使变量变成true，函数里的if-else只在切换视频时执行一次，不会主动触发进度条显示。

修复后的代码 #

JavaScript 部分

// 把控制变量移到函数外部，保留状态
let video1 = false;
let video2 = false;
const player = videojs("videoP");

function light(Cvideo) {
  let video;
  // 先移除之前绑定的事件，避免重复触发
  player.off("timeupdate");
  player.off("ended");

  if (Cvideo === 1) {
    document.getElementById("nameV").innerHTML = "1";
    video = "video/1.mp4";

    // 根据当前变量状态控制进度条
    if (!video1) {
      player.controlBar.progressControl.hide();
    } else {
      player.controlBar.progressControl.show();
    }

    // 监听视频结束事件，比计算百分比更准确
    player.on("ended", function() {
      video1 = true;
      player.controlBar.progressControl.show();
      document.getElementById("percentage").innerHTML = "100%";
    });

    // 实时更新进度百分比
    player.on("timeupdate", function() {
      if (!player.duration()) return;
      const percentage = (player.currentTime() / player.duration()) * 100;
      document.getElementById("percentage").innerHTML = Math.round(percentage) + "%";
    });

  } else if (Cvideo === 2) {
    document.getElementById("nameV").innerHTML = "2";
    video = "video/2.mp4";

    if (!video2) {
      player.controlBar.progressControl.hide();
    } else {
      player.controlBar.progressControl.show();
    }

    player.on("ended", function() {
      video2 = true;
      player.controlBar.progressControl.show();
      document.getElementById("percentage").innerHTML = "100%";
    });

    player.on("timeupdate", function() {
      if (!player.duration()) return;
      const percentage = (player.currentTime() / player.duration()) * 100;
      document.getElementById("percentage").innerHTML = Math.round(percentage) + "%";
    });
  }

  player.src({ type: "video/mp4", src: video });
  player.play();
}

HTML 部分

<video id="videoP" class=" video-js vjs-fluid" controls data-setup='{}'>
  <source src="video/1.mp4" type="video/mp4">
</video>
<p id="percentage">0</p>
<a href="#" class="nav-link text-dark ms-3" id="videoLink1" onclick="light(1)">1</a>
<a href="#" class="nav-link text-dark ms-3" id="videoLink2" onclick="light(2)">2</a>

关键修改说明 #

• 变量全局化：video1、video2移到函数外，确保每次切换视频时状态不会丢失。
• 改用ended事件：直接监听视频播放结束事件，精准判断视频是否播放完成，避开浮点数精度问题。
• 事件解绑：每次切换视频前移除旧的timeupdate和ended事件，避免重复触发。
• 实时更新进度条：视频结束时立即设置变量并显示进度条，同时切换视频时根据当前变量状态直接初始化进度条显示状态。

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