优雅降级的核心是将播放受阻视为常态，通过静音自动播放+用户手势恢复+可访问提示层实现友好体验：HTML设autoplay muted playsinline，捕获play() Promise拒绝并展示含图标、文案、按钮的提示层，按钮内执行video.play()与取消静音，UI用纯HTML/CSS实现并兼顾无障碍与触摸适配。
音视频自动播放失败时，优雅降级的核心是：不依赖自动播放成功，而是把“播放受阻”当作常态来设计 UI 和交互流程。重点不是修复浏览器限制，而是让用户清晰感知状态、理解原因，并能一键恢复播放。
用静音+自动播放作为默认策略
现代浏览器（Chrome、Safari、Edge 等）普遍允许静音的音视频自动播放。只要 autoplay 和 muted 同时存在，成功率大幅提升：
- HTML 中直接写：
<video autoplay muted playsinline></video>（playsinline对 iOS 很关键） - 避免 JS 动态加
muted——部分浏览器只认初始 HTML 属性 - 如果内容本身有重要音频，需明确告知用户“已静音，点击可开启声音”
监听播放失败并触发友好提示层
不要等 play() 抛错才响应，而应主动监听拒绝信号：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 监听
video.addEventListener('play', ...)和'error'或'stalled' - 更可靠的是捕获
play()的 Promise 拒绝：video.play().catch(e => { showPlayHintUI(); }); - 提示层建议包含：图标（如喇叭斜杠）、简短文案（“声音被浏览器阻止”）、一个醒目的操作按钮（“点此播放并开启声音”）
按钮行为要真正解决问题，而非仅隐藏提示
点击“播放”按钮后，必须执行真实且合规的用户手势触发流程：
立即学习“前端免费学习笔记（深入）”；
- 按钮绑定
click事件，内部调用video.play() - 若之前是静音状态，可同步取消静音：
video.muted = false; - 避免在非用户手势上下文中调用
play()（比如 setTimeout 或 fetch 回调里），否则仍会被拒绝 - 成功后移除提示层；失败则可显示二次提示（如“请检查浏览器设置或刷新页面”）
兼顾无 JS 场景与低配设备
降级 UI 本身也应具备基础可用性：
- 提示层用纯 HTML+CSS 实现，不依赖 JS 渲染（例如初始就写好
<div class="play-hint">...，JS 只负责显隐） <li>为屏幕阅读器添加 <code>aria-live="polite"和role="alert"，让障碍用户感知状态变化 - 小屏设备上按钮尺寸 ≥ 44×44px，留足触摸余量
- 考虑禁用 JS 时的回退：如提供带
<a href="video.mp4">下载观看</a>的备用链接
