视频播放后如何显示进度条？

本篇文章给大家分享《视频播放完后如何显示进度条》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

本文讲解如何为多个独立视频分别控制进度条的显隐逻辑，解决因变量作用域和事件监听时机导致的“播放完成时变量未更新”问题，并提供可稳定运行的 Video.js 实现方案。

在使用 Video.js 控制多个视频时，一个常见需求是：仅当某视频已完整播放过一次（即进度达 100%）后，才显示其对应的进度条，以提升用户体验（例如用于教学视频的“回看提示”）。但直接在 light() 函数内声明 video1 = false、video2 = false 会导致每次调用函数时变量被重置，无法持久记录播放状态——这正是原代码中 video1 = true 赋值后仍不生效的根本原因。

✅ 正确做法：使用闭包或外部状态管理

应将视频播放状态（如 video1Played, video2Played）提升至函数作用域之外，确保状态跨多次调用保持有效：

// ✅ 全局状态变量（推荐放在 <script> 标签顶部或模块顶层）
let video1Played = false;
let video2Played = false;

function light(Cvideo) {
  const player = videojs("videoP");
  let videoSrc = "";

  // 重置状态前先清理旧监听器（关键！避免重复绑定）
  player.off("timeupdate");

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

    if (!video1Played) {
      player.controlBar.progressControl.hide();
      player.on("timeupdate", function () {
        const percentage = (player.currentTime() / player.duration()) * 100;
        document.getElementById("percentage").textContent = Math.round(percentage) + "%";
        if (percentage >= 99.5) { // 使用 ≥99.5% 更鲁棒（避免浮点精度导致 100% 不触发）
          video1Played = true;
          player.controlBar.progressControl.show(); // 立即显示，无需等待下次调用
        }
      });
    } else {
      player.controlBar.progressControl.show();
    }

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

    if (!video2Played) {
      player.controlBar.progressControl.hide();
      player.on("timeupdate", function () {
        const percentage = (player.currentTime() / player.duration()) * 100;
        document.getElementById("percentage").textContent = Math.round(percentage) + "%";
        if (percentage >= 99.5) {
          video2Played = true;
          player.controlBar.progressControl.show();
        }
      });
    } else {
      player.controlBar.progressControl.show();
    }
  }

  // ✅ 必须设置新视频源并重新加载
  player.src({ type: "video/mp4", src: videoSrc });
  player.load(); // 显式调用 load() 确保元数据就绪
  player.play().catch(e => console.warn("Autoplay prevented:", e));
}

⚠️ 关键注意事项

• 避免重复绑定事件：每次切换视频前必须调用 player.off("timeupdate")，否则会累积多个监听器，导致 percentage 计算异常甚至内存泄漏。
• 精度容错：percentage === 100 在浮点运算中极难精确命中，建议改用 >= 99.5。
• 资源加载顺序：player.src() 后需调用 player.load() 再 player.play()，确保 duration() 可正确读取（否则 currentTime()/duration() 会返回 NaN）。
• CDN 引入必备：务必在 HTML 中引入 Video.js 官方资源：

  <link href="https://vjs.zencdn.net/7.21.1/video-js.css" rel="stylesheet">
  <script src="https://vjs.zencdn.net/7.21.1/video.min.js"></script>

✅ 最终效果

• 首次点击视频 1 → 进度条隐藏，实时显示百分比；播完自动显示进度条；
• 切换至视频 2 → 独立状态，同样逻辑生效；
• 再次点击已播完的视频 → 进度条始终可见，支持拖拽回看。

该方案真正实现了「每个视频独立记忆播放完成状态」，结构清晰、健壮可靠，适用于多视频切换场景。

以上就是《视频播放后如何显示进度条？》的详细内容，更多关于的资料请关注golang学习网公众号！