移动端进度条需确保timeupdate稳定触发、计算防NaN、DOM更新顺滑、拖拽支持touch事件；Safari和Android WebView差异大，须用loadedmetadata后绑定、buffered兜底直播、requestAnimationFrame优化渲染、transform替代width、touchstart/move/end实现精准拖拽。

移动端监听 timeupdate 更新进度条，核心是“能触发、算得准、动得顺、点得准”，但 Safari 和 Android WebView 的行为差异大，不能照搬 PC 写法。

确保事件能稳定触发

移动端的 timeupdate 触发频率比 PC 低，尤其 iOS Safari 可能延迟 300–500ms，且暂停/静音时不会触发。必须配合其他事件兜底：

• 在 loadedmetadata 后再绑定 timeupdate，避免 duration 为 NaN
• 对直播流（duration === Infinity）改用 buffered 计算已加载进度
• 可监听 seeking + seeked 补充跳转后的瞬间同步，减少视觉滞后

计算进度要防 NaN 和 0

移动端初始加载更不可靠，video.duration 经常为 0 或 NaN，直接除会得 NaN 或 Infinity：

DeepBI DHTML 页面生成器

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

下载

• 每次进入 timeupdate 处理函数，先加判断：if (!video.duration || isNaN(video.duration)) return
• 百分比计算后用 Math.max(0, Math.min(100, percent)) 限幅，防止负值或超 100%
• 总时长显示建议等 canplaythrough 后再渲染，更稳妥

更新 DOM 要兼顾性能与顺滑

高频触发 + 低端机重绘容易卡顿，别直接设 style.width：

• 用 requestAnimationFrame 批量更新，避免 layout thrashing
• CSS 层推荐用 transform: scaleX() 替代 width，硬件加速更稳
• 如需动画过渡，transition: transform 0.3s ease-out 比 width 更可靠

拖拽交互必须补全 touch 事件

移动端没有 mousedown/mousemove，只绑 click 不够，必须支持 touch：

• 监听 touchstart → touchmove → touchend，并调用 e.preventDefault() 阻止默认滚动
• touchmove 中实时计算比例，设置 video.currentTime，同时暂停 timeupdate 更新（用标志位控制）
• 松手后恢复播放，并让 timeupdate 自然接管，避免进度条“回弹”抖动