登录
推荐 文章 Go 技术 课程 下载 专题 AI
首页 >  文章 >  前端

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

时间：2026-01-02 18:54:57 301浏览 收藏

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

如何在视频播放完成时显示进度条

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

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

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

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

// ✅ 全局状态变量（推荐放在

✅ 最终效果

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

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

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

相关阅读
更多>
最新阅读
更多>
课程推荐
更多>