关键在于控制尺寸、脱离文档流方式和响应行为：video需设CSS宽高或aspect-ratio，配合muted autoplay playsinline；双栏用flex布局，左侧加flex-shrink:0，右侧禁用width:100%；小屏用flex-direction:column切换。

双栏布局里嵌入视频，关键不是“能不能放”，而是“放进去后别把右侧挤掉、别让左侧内容错位、别在小屏上堆成一团”。直接用 套进 Flex 容器就行，但必须控制尺寸、脱离文档流的方式和响应行为。

video 元素必须显式设宽高或用 CSS 限制尺寸

默认 是块级元素，且不设宽高时会按原始分辨率撑开容器。在 Flex 双栏中，这极易导致右侧视频区域溢出、换行，或把左侧内容顶下去。

• 不要只依赖 width 和 height HTML 属性——它们是固定像素值，响应式场景下会失效
• 推荐用 CSS 控制：给 .video-wrapper 设 flex: 0 0 400px（固定宽度）或 flex: 1（弹性占满剩余空间），再给内部 .video-container 设 max-width: 100% 和 aspect-ratio: 16/9
• 如果用 aspect-ratio，记得加 height: auto 防止 Firefox 渲染异常

autoplay 必须配合 muted，否则多数浏览器静音拦截

双栏中常需自动播放背景视频，但 Chrome/Firefox/Safari 默认禁止有声 autoplay，即使写 autoplay 也会静音或完全不播。

• 必须同时加 muted 和 autoplay 属性：
• playsinline 是 iOS/iPadOS 必选项，否则视频会全屏弹出
• 如果后续要用户点击后取消静音，得用 JS 调用 video.muted = false，且必须在用户手势回调中执行（比如 button.addEventListener('click', () => { video.muted = false; })）

src 路径错误或 MIME 类型缺失会导致空白但无报错

双栏结构本身不干预资源加载，但视频不显示时，90% 是路径或服务配置问题，而非布局问题。

DeepBI DHTML 页面生成器

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

下载

• 本地开发务必用 HTTP 服务起页（如 python3 -m http.server），双击打开 file:// 协议下 的 src 会被浏览器拒绝加载
• Nginx/Apache 若未配置 .mp4 的 MIME 类型（video/mp4），返回状态码可能是 200 但实际响应体为空，控制台只显示 Media resource failed to load
• 检查路径是否为相对路径（如 ./videos/intro.mp4），绝对路径（C:\xxx\ 或 /videos/ 未配 base）大概率失败

移动端横向滚动视频列表需禁用 flex-wrap 并设 overflow-x

若双栏中的“视频区”不是单个视频，而是横向排列的多个 （如预览缩略图列表），默认会竖向堆叠，必须主动干预流式行为。

• 容器设 display: flex + flex-wrap: nowrap + overflow-x: auto
• 每个 外包一层
  ，并设 flex: 0 0 320px（或具体宽度）防止被压缩
• 加 -webkit-overflow-scrolling: touch 提升 iOS 滚动流畅度
• 避免对 直接设 width: 100% —— 它会随容器缩放失真，应统一用固定宽高比 + object-fit: cover

最易被忽略的是：双栏中视频区域的 z-index 和 transform 组合。一旦给视频容器加了 transform: translateZ(0) 或其他 3D 变换，它会创建新层叠上下文，可能遮挡左侧导航菜单的下拉项——这不是视频本身的问题，而是层叠顺序被意外改写了。