HTML5 标签本身不支持并发控制，需通过preload="metadata"、IntersectionObserver延迟加载、手动节流、hls.js/dash.js配置、错误重试限制及服务端Range支持等综合手段优化多视频加载性能。
HTML5 原生 <video></video> 标签本身不提供加载并发控制能力，浏览器对单个视频的 HTTP 请求（如 Range 分片）由底层网络栈管理，无法直接限制“同时加载几个视频”。真正需要管控并发的场景，是页面中存在多个视频元素，或使用 HLS/DASH 等流式方案时主动发起大量分片请求。处理核心在于：**避免资源争抢、按需加载、错峰调度**。
控制页面内多视频的初始加载节奏
当一页有 3 个以上 <video></video> 标签时，浏览器可能并行发起多个大文件请求，导致带宽打满、首屏卡顿甚至部分视频加载失败：
- 统一设
preload="metadata"，只加载时长、尺寸等元数据，不触发主体内容下载 - 对非首屏视频，用 IntersectionObserver 延迟加载：进入视口前保持
src=""或空<source></source>，进入后再注入真实地址 - 若必须预加载多个视频，可手动节流：例如最多允许 2 个同时调用
load()，其余排队，监听前一个的canplay或loadeddata后再启动下一个
对 HLS/DASH 流媒体限制分片请求数
使用 hls.js 或 dash.js 时，并发由播放器内部控制。默认可能同时拉取 3–4 个 TS 或 MP4 分片，易压垮弱网或 CDN：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
-
hls.js：配置
fragLoadingTimeOut和maxBufferLength，更重要的是设置lowLatencyMode: true+enableWorker: true，它会自动降低分片预加载深度，减少并发请求数 -
dash.js：通过
setConfig({ streaming: { abr: { maxBitrate: 'audio=128000,video=2000000' } } })限制码率，间接减少高码率分片数量；也可用setMaxAllowedRepresentationRatio(0.8)主动降级清晰度 - 服务端配合：Nginx 或 CDN 配置
limit_req按 IP 或 User-Agent 限速，防止单页恶意刷分片
避免因自动重试放大并发压力
错误重试若无约束，会在短时间内密集发起重复请求，等效于人为制造并发高峰：
立即学习“前端免费学习笔记（深入）”；
- 禁用全局
.load()调用——它会中断当前加载并重新发起全部请求，改用事件驱动（如监听error后仅替换src或切换<source></source>） - 对
MEDIA_ERR_NETWORK类错误，重试前用fetch(url, { method: 'HEAD' })快速探测，失败则跳过，不盲目重发 GET - 设置最大重试次数 ≤ 2，且首次延迟 ≥ 1s，避免瞬间多路重试
服务端配合：启用 Range 请求与合理缓存
客户端并发优化效果依赖服务端支持：
- 确保 Web 服务器开启 HTTP Range 支持（Apache/Nginx 默认开启），使浏览器能分段加载，而非整文件阻塞式请求
- 对视频资源设置较长的
Cache-Control: public, max-age=31536000，利用强缓存减少重复请求；CDN 缓存策略需同步配置，避免每次回源 - 若使用对象存储（如 S3），确认其支持 206 Partial Content 响应，否则分片加载会退化为全量请求
