优雅降级的核心是将播放受阻视为常态，通过静音自动播放+用户手势恢复+可访问提示层实现友好体验：HTML设autoplay muted playsinline，捕获play() Promise拒绝并展示含图标、文案、按钮的提示层，按钮内执行video.play()与取消静音，UI用纯HTML/CSS实现并兼顾无障碍与触摸适配。

音视频自动播放失败时，优雅降级的核心是：不依赖自动播放成功，而是把“播放受阻”当作常态来设计 UI 和交互流程。重点不是修复浏览器限制，而是让用户清晰感知状态、理解原因，并能一键恢复播放。

用静音+自动播放作为默认策略

现代浏览器（Chrome、Safari、Edge 等）普遍允许静音的音视频自动播放。只要 autoplay 和 muted 同时存在，成功率大幅提升：

• HTML 中直接写：（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 渲染（例如初始就写好
  ...，JS 只负责显隐）
• 为屏幕阅读器添加 aria-live="polite" 和 role="alert"，让障碍用户感知状态变化
• 小屏设备上按钮尺寸 ≥ 44×44px，留足触摸余量
• 考虑禁用 JS 时的回退：如提供带 @#@#@#@#@#@#@#@#@#@0 的备用链接