视频加载慢、首帧延迟高，优先检查 preload 和 autoplay 策略：设 preload="auto"（移动端 Safari 除外）、autoplay 需 muted，监听 canplaythrough；服务端需支持 Accept-Ranges；提供多码率 MP4 并前置 moov；确保服务器正确响应 Range 请求；避免在 timeupdate 中频繁设置 currentTime。
视频加载慢、首帧延迟高，优先检查 preload 和 autoplay 策略
HTML5 <video></video> 默认 preload="metadata"，只加载元数据（时长、尺寸、封面），不预加载视频流，导致点击播放后明显卡顿。若网络条件可控（如内网、Wi-Fi），可设为 preload="auto"；但注意移动端 Safari 会忽略该值，强制按 metadata 处理。
自动播放需配合静音（muted）才可能生效，否则 Chrome/Safari 会阻止并延迟触发 play()。实操建议：
- 对关键场景（如广告页、引导页）用
preload="auto" muted autoplay，并监听canplaythrough而非loadeddata再展示 UI - 避免在
DOMContentLoaded后立刻调用play()，应等canplay或canplaythrough事件 - 服务端需正确返回
Accept-Ranges: bytes响应头，否则浏览器无法分片请求，拖拽和缓冲失效
卡顿集中在播放中，大概率是码率/分辨率与终端不匹配
同一份高清 MP4 文件，在低端 Android 手机上硬解失败，会降级为软解，CPU 占用飙升，直接卡死。这不是前端代码问题，而是媒体资源未适配。
解决路径是提供多分辨率 + 自适应码率（ABR）能力，但纯 HTML5 <video></video> 不支持 DASH/HLS 自动切换。可行方案：
立即学习“前端免费学习笔记（深入）”；
- 用
<source></source>提供 2–3 档固定码率 MP4（如 480p/720p/1080p），配合 JS 检测screen.width和navigator.connection.effectiveType动态设置src - 必须用 H.264 编码（而非 AV1/VP9），保障 iOS/Android 兼容性；MP4 容器中 moov box 必须前置（可用
ffmpeg -i in.mp4 -c copy -movflags +faststart out.mp4修复） - 禁用
controlsList="nodownload"等非标准属性——某些安卓 WebView 会因此阻塞解码线程
频繁 seek 或拖拽后卡住，检查服务器是否支持字节范围请求
错误现象：拖到视频后半段，进度条跳回开头，控制台报 DOMException: The element has no supported sources 或静默失败。根本原因是 Web 服务器未正确响应 Range 请求，返回 200 而非 206 Partial Content。
验证方式：用 curl 检查响应头：
curl -I -H "Range: bytes=0-999" https://example.com/video.mp4正常应返回
HTTP/2 206 和 Content-Range。常见问题：
- Nginx 默认开启
range，但若用了proxy_pass且上游不支持，需加proxy_force_ranges on; - Python Flask 需手动实现
Range解析（send_file不支持）；Express 的express-static默认支持 - CDN（如 Cloudflare）可能缓存了无
Accept-Ranges响应头的初始请求，需 purge 并配置缓存规则排除Range请求
JS 主动控制播放时卡顿，警惕 currentTime 设置时机
在 timeupdate 事件里频繁修改 currentTime（比如做精准跳转或变速同步），极易触发浏览器内部缓冲重置，表现为画面冻结 1–2 秒。这不是 bug，是规范要求：每次 currentTime 变更都会中断当前解码流，重新 seek。
优化要点：
- 避免在
timeupdate中连续赋值video.currentTime = x；改用requestAnimationFrame节流，每帧最多一次 - seek 前先检查
video.readyState >= HTMLMediaElement.HAVE_FUTURE_DATA，否则强制load()会清空已有缓冲 - 使用
video.playbackRate替代逐帧currentTime修改来实现变速，性能高一个数量级
canplaythrough + 视频文件 moov 位置靠后。排查时务必从网络面板看每个 .mp4 请求的状态码和响应头，再看媒体面板（Chrome DevTools → Media tab）里的解码帧率和丢帧标记。 
