主图视频必须用语义化标签并符合SEO与无障碍标准：需含src、poster、preload="metadata"，禁用autoplay除非静音且无音频轨道；须包裹在中，配和aria-label描述性文本，并外层加region标记；首帧清晰、0.3秒内启动动态动作、全程≤5秒、poster与首帧像素一致。

主图视频不是插进去就完事，它得能被搜索引擎抓取、被屏幕阅读器识别、被用户用键盘操作，否则平台算法不认，残障用户进不来，流量自然卡在第一关。

主图视频必须用 标签，不能用 + JS 模拟

很多卖家图省事，把视频转成 GIF 或用 标签配 JS 点击播放，这会导致：搜索引擎只索引到一张图，算法判定为“无视频内容”；屏幕阅读器完全无法感知视频存在；移动端自动播放策略失效（iOS/Android 大部分浏览器禁止非静音自动播放）。

• 必须带 src 属性指向真实 MP4/H.264 文件，不能是 base64 或 CDN 重定向链接（部分爬虫无法解析）
• 加 preload="metadata"，避免页面加载时直接下载整段视频拖慢首屏
• 必须设 poster 属性——这是视频封面，也是 SEO 和无障碍的关键 fallback 图像
• 禁用 autoplay（除非静音且加 muted），否则多数浏览器会拦截并显示空白黑块

语义结构要包裹在

里，aria-label 不能写“主图视频”

单纯写 是无效的。它需要上下文语义，否则对 SEO 和读屏软件来说就是一段“不可理解的媒体流”。

• 外层用
  包裹，
  写具体描述，例如：
  iPhone 15 Pro 钛金属机身特写，展示边缘倒角与哑光涂层细节
• 自身加 aria-label，内容要和
  一致，不能笼统写“商品视频”或“主图视频”
• 整个
  外再套一层
  ，方便键盘用户跳转

自动播放+静音必须同时满足，否则 iOS/Android 都不放

电商详情页普遍希望首屏视频自动播放吸引眼球，但系统限制极严：iOS Safari 要求 playsinline muted autoplay 全部存在，且视频不能有音频轨道（哪怕静音）；Android Chrome 则要求 muted + 用户有过交互（如滚动）才可能触发。

DeepBI DHTML 页面生成器

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

下载

• 导出视频前务必去掉音频轨道（用 ffmpeg -an 或剪映“导出无声”选项），仅靠 muted 不够
• 加 playsinline，否则 iOS 会全屏弹出播放器，破坏页面动线
• 加 webkit-playsinline 和 x5-playsinline（适配微信/QQ 内置浏览器）
• 不要依赖 JS 监听 canplay 后再 play()，移动端多数情况会抛 NotAllowedError

首图视频制作时，关键帧节奏必须卡在 0.8 秒内

用户滑动页面时，主图区域停留时间平均不到 3 秒，其中前 0.8 秒决定是否驻留。视频前 1 秒没传递核心卖点，基本等于没播。

• 首帧必须是产品最清晰正面图（白底/纯色背景），不能是渐入、旋转或文字遮罩
• 0.3 秒内出现第一个动态动作：镜头推进、材质反光变化、开关演示等，不能等 2 秒才动
• 全程控制在 5 秒以内，超时会被平台截断（京东/淘宝主图视频上限为 5 秒）
• 用剪映做时，优先选“商品讲解”模板而非“Vlog 风”，后者节奏慢、信息密度低

最容易被忽略的是视频元数据——poster 图必须和首帧像素级一致，否则用户看到封面和第一帧画面错位，会本能觉得“卡了”或“加载失败”，直接划走。这不是设计问题，是前端体验的硬门槛。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！