加 controls 仍不显示播放按钮的主因是 src 路径错误、file:// 协议限制、mime 类型未配置、移动端 autoplay 被拦截；进度条失效多因未等 loadedmetadata 就取 duration、用 change 替代 input 监听、未处理 seeking/seeked；状态管理需避免依赖 paused，而用显式变量并捕获 play() 异常。

直接用 <audio></audio> 或 <video></video> 加 controls 属性，5 秒就能跑起来——但真要“可用”，得先绕过几个默认控件不告诉你、却会卡住你的坑。

为什么加了 controls 还不显示播放按钮

常见现象：页面加载后视频/音频静默，控件区域空白或只有音量图标，点击无响应。

• src 路径错误是最常见原因——浏览器 Network 面板里看是不是 404；本地双击打开 HTML 时，file:// 协议下 Chrome 会拒绝加载音频/视频，必须起本地服务（比如 Python 的 python -m http.server）
• 服务器没配对 MIME 类型：.mp3 应返回 audio/mpeg，.mp4 应返回 video/mp4；Nginx/Apache 需手动加 types 配置，否则 Safari 和 Firefox 可能静默失败
• 移动端（尤其 iOS Safari）无视 autoplay，且首次播放必须由用户手势触发（click/tap），play() 调用必须在事件回调里，不能写在脚本顶层

去掉 controls 后，进度条拖不动的典型原因

不是 JS 写错了，而是时机和事件选错。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• loadedmetadata 事件没等就取 video.duration ——结果是 NaN，导致 seekBar.max 为 NaN，拖动失效；务必在该事件后才初始化进度条范围
• 用了 change 而不是 input 监听拖拽：前者只在松手后触发一次，后者实时响应滑动，跳转才跟手
• 没处理 seeking 和 seeked：拖动时 UI 显示“缓冲中”状态更友好；seeked 才表示跳转完成，适合重置加载指示器
• currentTime 设为负数或超 duration 值会被自动截断，不报错也不触发事件——建议先做边界判断再赋值

播放/暂停状态管理别信 paused

video.paused 在加载中、网络卡顿、自动播放被拦截时会返回 true，但它不代表“用户想暂停”，只是当前没在播。

• 定义一个显式状态变量，比如 let isPlaying = false，所有播放动作都同步更新它
• 调用 play() 必须 .catch() 捕获拒绝（如自动播放策略拦截），否则静默失败，UI 状态就脱节
• 监听 play、pause、ended 三个事件来反向同步状态，而不是只靠点击按钮单向控制
• 移动端 touch 事件必须同时监听：touchstart/touchmove/touchend + mousedown/mousemove/mouseup，缺一不可

真正麻烦的不是写多少行代码，而是每个交互点背后都有浏览器策略、设备限制和加载时序在暗处卡你一下——尤其是 loadedmetadata 没等、play() 没 catch、input 写成 change 这三处，90% 的“明明逻辑一样却不动”都栽在这儿。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！