多路视频并发卡顿源于资源争抢，需错峰加载、按需解码与服务端协同：设preload="metadata"、用intersectionobserver延迟加载、h.264 level≤3.1编码、服务端开启range支持及长效缓存、移动端加autoplay muted playsinline等属性。
多路视频并发播放卡顿，本质是资源争抢——带宽打满、解码器过载、主线程阻塞。HTML5 <video></video> 标签本身不控制并发数，浏览器会按需发起请求，但默认策略在多视频场景下极易失效。解决关键不是“压住播放”，而是“错峰加载 + 按需解码 + 服务端协同”。
控制初始加载节奏，避免带宽挤占
页面中同时存在 3 个以上 <video></video>，尤其都设了 preload="auto"，浏览器可能瞬间拉取多个百兆级文件，直接拖垮首屏。
- 统一设
preload="metadata"：只加载时长、宽高、首帧缩略图等轻量元数据，不触发主体视频下载 - 非首屏视频用
IntersectionObserver延迟注入src：进入视口前保持src=""或空<source></source>，避免提前占用连接 - 若必须预加载多个，手动节流：例如最多允许 2 个视频调用
.load()，其余排队；监听前一个的loadeddata事件后再启动下一个
优化编码与格式，降低解码压力
卡顿常被误认为是网络问题，实则 70% 来自解码失败或延迟——尤其在低端安卓机或 iOS WebView 中。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 统一用 H.264 Baseline 或 Main Profile，Level ≤ 3.1：全平台硬解兼容，避免 High@5.1 等高阶 profile 触发软解卡顿
- GOP（关键帧间隔）设为 1–2 秒（如 30fps 下
-g 30）：确保任意时间点都能快速找到 IDR 帧，减少拖动后黑屏等待 - MP4 文件加
-movflags +faststart：把moov头移到文件开头，避免浏览器加载到末尾才开始播放 - 提供 WebM 作为备用：
<source src="vid.webm" type="video/webm"></source>，体积更小、解码更快，现代浏览器优先选它
服务端配合，支撑分段与缓存
前端再优化，若服务端不支持 Range 请求或缓存混乱，依然会整包加载、重复传输、响应超时。
- 确认 Nginx/Apache 开启 HTTP Range 支持（默认开启，检查是否被 location 块中
disable_range on关闭） - 视频资源设置长效缓存：
Cache-Control: public, immutable, max-age=31536000，配合 ETag 避免重复下载 - CDN 层配置限速（如 Nginx
limit_req），防止单页恶意刷多个视频分片请求 - 对大视频（＞10MB），后端切片为
init.mp4 + segment-*.m4s，前端用 MSE 分段加载，而非整文件src
移动端专项处理，绕过策略陷阱
iOS 和安卓 WebView 对自动播放、内联、静音有强限制，违反即卡死或跳全屏。
- 必须同时写
autoplay muted playsinline webkit-playsinline：缺一不可，否则 Safari 强制全屏、Android 微信 WebView 拒绝播放 - 禁用
preload="auto"：移动端 Safari 直接忽略，且会浪费 4G 流量；metadata已足够支撑封面和 UI 初始化 - 用户手势后才启用声音：首次点击按钮再执行
video.muted = false; video.play()，避免静音解除失败中断播放 - 小屏设备主动降级：用媒体查询
@media (max-width: 768px)隐藏<video></video>，改用background-image静态图
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
