HTML5视频卡顿主因是资源交付或解码能力，非video标签本身；常见问题包括拖动黑屏、首帧延迟、缓冲频繁、音画不同步，根源在编码参数、CDN配置、硬件加速未启用等。
为什么 video 标签加载后卡顿，不是网络慢就是解码问题
HTML5 视频卡顿，90% 以上跟资源交付方式或浏览器解码能力有关，和 video 标签本身关系不大。常见现象是：进度条拖动后黑屏几秒、首帧延迟高、播放中频繁缓冲、音画不同步。这些问题往往出在视频编码参数、CDN 配置、或未启用硬件加速上，而不是简单换一个 preload 属性就能解决。
用 mediaSource + MP4 分片（而非完整文件）实现可控缓冲
直接 <video src="big.mp4"></video> 会让浏览器一次性请求整个文件，服务端响应慢或带宽波动时极易卡住。更可控的做法是使用 MediaSource Extensions (MSE)，配合分片（如 init.mp4 + segment-1.m4s）按需加载：
- 必须用
H.264 + AAC编码，且moov头需前置（可用ffmpeg -c copy -movflags +faststart修复） - 服务端要支持
Range请求（返回206 Partial Content），否则 MSE 无法分段拉取 - 避免在
sourceBuffer.appendBuffer()前未调用sourceBuffer.abort()，否则会因状态冲突导致卡死
const mediaSource = new MediaSource();
video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', () => {
const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.64001f, mp4a.40.2"');
fetch('segment-1.m4s').then(r => r.arrayBuffer()).then(buf => {
sourceBuffer.appendBuffer(buf); // 注意：append 后需监听 updateend 再 append 下一段
});
});
preload 和 autoplay 的真实作用被严重高估
preload="auto" 不等于“提前下完全部视频”，它只告诉浏览器“可以开始加载”，实际行为由 UA 自行决定（Chrome 在移动设备默认忽略 auto）；autoplay 在多数现代浏览器中受限于用户交互策略，没用户手势就静音也不播。真正影响首帧速度的是：
-
poster图像尺寸是否过大（建议 ≤ 1280×720，否则渲染阻塞） - 视频
keyframe interval是否过长（> 4s 就容易拖动卡顿，推荐 2s） - 是否启用了
decoding="async"（仅 Chromium 支持，可缓解主线程解码压力）
移动端真机调试必须看 chrome://media-internals 和 chrome://histograms/Video
开发时在桌面 Chrome 播放流畅，不等于真机 OK。iOS Safari 对 H.264 级别敏感（只支持 Main Profile Level 3.1 或更低），Android 各厂商解码器差异更大。必须在真机打开对应地址查看实时日志：
立即学习“前端免费学习笔记（深入）”；
- 卡顿时看
pipeline_state是否长期停在kStarting或kSeeking - 查
video_decoder_name是否为MojoVideoDecoder（表示启用了硬件解码） - 若
frames_dropped_total持续上涨，说明 GPU 解码吞吐不足，得降分辨率或帧率
很多优化点藏在编解码细节里，比如用 ffmpeg -vcodec libx264 -profile:v main -level 3.1 输出，比盲目压缩码率更有效。
