主图视频必须用语义化标签并符合SEO与无障碍标准：需含src、poster、preload="metadata"，禁用autoplay除非静音且无音频轨道；须包裹在中，配和aria-label描述性文本，并外层加region标记；首帧清晰、0.3秒内启动动态动作、全程≤5秒、poster与首帧像素一致。
主图视频不是插进去就完事，它得能被搜索引擎抓取、被屏幕阅读器识别、被用户用键盘操作，否则平台算法不认，残障用户进不来，流量自然卡在第一关。
主图视频必须用 <video></video> 标签，不能用 <img alt="HTML商品详情页主图视频怎么放？首图视频制作教程" > + JS 模拟
很多卖家图省事，把视频转成 GIF 或用 <img alt="HTML商品详情页主图视频怎么放？首图视频制作教程" > 标签配 JS 点击播放，这会导致：搜索引擎只索引到一张图，算法判定为“无视频内容”；屏幕阅读器完全无法感知视频存在；移动端自动播放策略失效（iOS/Android 大部分浏览器禁止非静音自动播放）。
-
<video></video>必须带src属性指向真实 MP4/H.264 文件，不能是 base64 或 CDN 重定向链接（部分爬虫无法解析） - 加
preload="metadata"，避免页面加载时直接下载整段视频拖慢首屏 - 必须设
poster属性——这是视频封面，也是 SEO 和无障碍的关键 fallback 图像 - 禁用
autoplay（除非静音且加muted），否则多数浏览器会拦截并显示空白黑块
语义结构要包裹在 <figure></figure> 里，aria-label 不能写“主图视频”
单纯写 <video></video> 是无效的。它需要上下文语义，否则对 SEO 和读屏软件来说就是一段“不可理解的媒体流”。
- 外层用
<figure></figure>包裹，<figcaption></figcaption>写具体描述，例如：<figcaption>iPhone 15 Pro 钛金属机身特写，展示边缘倒角与哑光涂层细节</figcaption> -
<video></video>自身加aria-label，内容要和<figcaption></figcaption>一致，不能笼统写“商品视频”或“主图视频” - 整个
<figure></figure>外再套一层<section role="region" aria-label="商品主图视频区"></section>，方便键盘用户跳转
自动播放+静音必须同时满足，否则 iOS/Android 都不放
电商详情页普遍希望首屏视频自动播放吸引眼球，但系统限制极严：iOS Safari 要求 playsinline muted autoplay 全部存在，且视频不能有音频轨道（哪怕静音）；Android Chrome 则要求 muted + 用户有过交互（如滚动）才可能触发。
生成可在 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 图必须和首帧像素级一致，否则用户看到封面和第一帧画面错位，会本能觉得“卡了”或“加载失败”，直接划走。这不是设计问题，是前端体验的硬门槛。
