网页背景视频在低网速下应提前主动降级为静态图，依据网络信息（navigator.connection API或探测文件）、播放状态（canplay/stalled事件）及设备上下文（移动端、iOS、页面可见性）三重信号决策，并配以轻量WebP海报图优化体验。

网页背景视频在低网速下自动降级为静态图片，核心不是“等网速变差再切换”，而是提前判断、主动降级、无缝替换。关键在于不依赖用户感知延迟，而是在资源加载初期就决策——用网络信息、设备能力、播放状态三重信号做判断。

用网络信息做第一道防线

浏览器的 navigator.connection API 能实时获取当前网络类型和有效带宽（如 4G、slow-2g、downlink 值）。这不是理论值，而是系统估算的真实可用速率：

• 检测到 downlink （单位 Mbps）或 effectiveType === '2g' || 'slow-2g'，直接跳过视频加载，插入静态海报图
• 即使未支持该 API（如旧版 Safari），也应设默认降级策略：首次访问时先请求一个极小的探测文件（如 1KB 的 txt），根据响应时间

用播放状态做第二道确认

视频标签本身会暴露加载瓶颈，比网络 API 更真实：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 监听 canplay 事件：若 3 秒内未触发，说明解码卡顿或资源未就绪，立即 video.remove() 并插入
• 监听 stalled 事件：表示缓冲中断，此时暂停播放、隐藏 video、显示静态图，避免白屏或卡顿假死
• 不要等 error——很多低网速场景不会报错，只是无限 loading

用设备与上下文做兜底控制

有些情况网络指标不准，需结合硬性规则：

• 移动端（matchMedia('(max-width: 768px)') 或 UA 检测）默认降级，不尝试播放视频——省电、防误触、保滚动流畅
• iOS 设备无论网速如何，都必须用用户手势触发播放；若页面加载 2 秒后仍无 touch/click，自动 fallback 到静态图
• 页面进入后台（visibilitychange 为 hidden）后再切回，若发现视频已卡住或解码失败，不再恢复，直接保留静态图

静态图也要轻量且合理

降级不是随便换张图，否则失去优化意义：

• 静态图用 WebP 格式，尺寸严格匹配容器（如 1920×1080 背景对应 1920×1080 图），体积控制在 150KB 以内
• 设置 loading="eager" 和明确的 width/height，防止布局偏移（CLS）
• 避免用视频帧截图——选一张有纵深感、主视觉居中、色彩柔和的定制海报，比截帧更稳、更小、更适配暗色模式