底部固定悬浮进度条必须用 position: fixed 并设 bottom: 0、left: 0、right: 0 和 z-index；需监听 timeupdate 事件，配合 requestAnimationFrame 节流更新，注意 duration 初始化时机；UI 推荐双 div 实现，PC 端用 mouse 事件、移动端必须补充 touch 事件并 preventDefault。
底部固定悬浮条用 position: fixed 实现
要让进度条始终停在页面最下方且不随滚动消失，position: fixed 是唯一可靠方案。绝对定位（position: absolute）或 sticky（position: sticky）在多数滚动场景下会失效或行为异常。
关键点：
-
bottom: 0必须显式设置，仅靠position: fixed不足以锚定到底部 - 需加
left: 0和right: 0确保宽度铺满视口，否则可能只占内容宽度 - 务必设
z-index（如z-index: 1000），避免被其他层遮盖 - 若父容器有
transform、filter或will-change，会创建新的 containing block，导致fixed相对它定位——这是常见隐形坑
视频播放进度条需监听 timeupdate 事件
HTML5 <video> 元素本身不提供底部悬浮进度条，必须手动同步。核心是监听 timeupdate 事件，实时读取 currentTime 和 duration 计算百分比。
实操注意：
立即学习“前端免费学习笔记（深入）”；
- 不要用
progress事件——它只反映加载进度，和播放无关 -
timeupdate触发频率不固定，高帧率视频下可能密集触发，建议用requestAnimationFrame节流更新 DOM，避免卡顿 -
video.duration初始为NaN，需等loadedmetadata或canplay事件后才可用，否则计算会出错 - 示例逻辑：
video.addEventListener('timeupdate', () => { if (isNaN(video.duration)) return; const percent = (video.currentTime / video.duration) * 100; progressBar.style.width = `${Math.max(0, Math.min(100, percent))}%`; });
进度条 UI 建议用伪元素或双层 div 模拟
纯 CSS 实现拖拽和点击跳转时，用 <input type="range"> 最省事，但默认样式难控制、移动端兼容差；更稳妥的是用两个 <div>：外层容器 + 内层进度填充块。
要点：
- 外层设
height: 4px、background-color: #e0e0e0，内层用height: 100%+ 动态width+background-color: #2196f3 - 点击跳转需绑定
click事件，通过getBoundingClientRect()计算点击位置比例，再赋值给video.currentTime - 拖拽需监听
mousedown→mousemove→mouseup，注意 document 级绑定mousemove防止鼠标移出条外中断拖拽 - 别忘了禁用默认选中：
user-select: none加到外层容器上
移动端 touch 事件必须单独处理
PC 端的 click 和 mousemove 在 iOS/Android 上基本不可靠，尤其 Safari 对 touch 事件有严格限制。不处理 touch，进度条在手机上就点不动、拖不了。
必须补充：
- 监听
touchstart替代mousedown，touchmove替代mousemove，touchend替代mouseup -
touchmove默认会触发页面滚动，需加event.preventDefault()（但仅限在进度条区域，避免影响全局） - 触摸坐标要用
touches[0].clientX，不是clientX - iOS Safari 中，
video元素在非全屏状态下常被系统控件遮挡，底部条可能被截断——此时需检查video的webkit-playsinline属性和playsinline是否启用
真正麻烦的不是写几行 CSS 或 JS，而是跨设备行为差异：Safari 的 fixed 定位抖动、Android WebView 的 touch 事件延迟、低性能设备上 timeupdate 的丢帧……这些没法靠一次实现解决，得留好调试钩子，比如把当前 currentTime 打印到控制台，先确认数据流通不通。
