video.src重设后播放位置异常的根源是currentTime未手动归零，而非缓存问题；需在赋值前调用pause()和currentTime=0，并配合load()重置解码器状态。
video.src重设后播放位置异常：不是缓存问题，是currentTime残留
HTML5 video 元素在缓存存在时，src 重设不会自动重置播放进度——currentTime 仍保持旧值，导致“视频跳到之前的位置再开始播”，看起来像“缓存错乱”。这不是浏览器缓存机制出错，而是开发者未手动归零状态。
- 即使调用
load()，currentTime也不会自动清零；它只重置加载逻辑，不重置时间轴 - 若上一次播放停在 12.3s，新
src加载完成后立即play()，就会从 12.3s 开始（可能直接黑屏或卡顿） - 部分浏览器（如 Safari）在
src变更后还可能保留paused状态，造成静默不播
实操建议：src 赋值前先设 currentTime = 0，并确保 pause()：
const video = document.getElementById('myVideo');
video.pause();
video.currentTime = 0;
video.src = 'new-video.mp4';
video.load(); // 触发重新解析元数据
// 可选：监听 loadedmetadata 后再 play()
video.addEventListener('loadedmetadata', () => video.play(), { once: true });
强制清除视频缓存的三种可靠方式
浏览器对 video 的缓存行为比图片/脚本更隐蔽：HTTP 缓存策略、媒体片段缓存（media cache）、甚至解码器内部缓冲都可能干扰重播。单纯刷新页面往往无效。
-
src设空再赋值 +load()是最基础有效的方式，但需配合currentTime = 0和pause() - 加时间戳参数（如
?t=1738676700）可绕过 HTTP 缓存，但注意：某些 CDN 或代理会忽略 query 参数，且不能用于跨域资源（CORS 预检失败） - 使用
URL.createObjectURL(blob)动态生成地址可彻底隔离缓存，适合本地文件或 Blob 流场景，但需手动revokeObjectURL防内存泄漏
关键点：无论哪种方式，都必须调用 load() —— 否则浏览器不会重新发起请求或重置解码器状态。
立即学习“前端免费学习笔记（深入）”；
重绘（repaint）和重排（reflow）不是视频故障主因，但会掩盖真实问题
视频控件 UI 闪烁、进度条跳动、全屏按钮失灵等现象，常被误判为“视频缓存 bug”，实际多由 CSS 或 DOM 操作引发的重排/重绘干扰所致。例如：video 容器宽高频繁变化会触发 layout，导致 video 内部渲染管线重置，表现就像“播放中断”。
- 避免在
timeupdate事件中反复读写offsetWidth或getComputedStyle()—— 这会强制同步重排，拖慢帧率，甚至让requestAnimationFrame失效 - 进度条拖拽时动态设置
video.currentTime是安全的，但若同时修改父容器style.width，就可能触发重排阻塞后续帧 - 用
transform: translateZ(0)或will-change: transform将视频容器提升为独立合成层，能隔离大部分布局抖动影响
排查时先关掉所有自定义控制栏 CSS，用原生 controls 验证是否复现——若原生控件正常，问题一定出在你的 UI 层。
容易被忽略的底层陷阱：MIME 类型与 CORS 静默失败
视频请求返回 200 但始终黑屏？控制台无报错？大概率是服务端响应头不匹配。浏览器对 video 的 MIME 类型校验极严：哪怕文件是标准 MP4，若响应头为 Content-Type: application/octet-stream，Chrome 会判定为 MEDIA_ERR_DECODE（code=3），而非更明确的 MEDIA_ERR_SRC_NOT_SUPPORTED（code=4）。
- 用
curl -I https://yoursite.com/video.mp4检查真实响应头，确认Content-Type是video/mp4（非text/plain或缺失） - 跨域视频必须带
Access-Control-Allow-Origin: *，且video标签需加crossorigin属性，否则元数据（duration、尺寸）无法读取，currentTime设置可能失效 - 本地双击打开 HTML（
file://协议）下，所有视频加载均不可用——AppCache 已弃用，但video的 CORS 和 MIME 校验在file://下同样被禁用
真正棘手的永远不是“怎么写”，而是“怎么让服务器把头信息说对”。很多视频位置异常、加载卡死、error 事件不触发的问题，根源都在这一行响应头里。
