2剪辑分镜脚本
2.1 时间轴规划
0s ────────── 5s ───────────────────── 18s ────────── 25s ── 30s
│ 开场钩子 │ 核心资质/信任 │ 项目优势 │ 收尾引流 │
│ (2张图) │ (5张图) │ (3张图) │ (2张图) │
└──────────────┴───────────────────────┴──────────────┴──────────┘
📍 段落一：开场钩子（0–5秒）
| 图片 | 画面内容 | 字幕 |
|---|
| 图1 | 大堂外观（Lobby） | 来首尔做皮肤抗衰，别再乱找普通医美啦！ |
| 图2 | 前台接待区（Reception） | 认准正规红标专门医 Alive皮肤科 |
🎯 设计思路：前5秒必须抓住注意力。"别再乱找"制造痛点，"红标专门医"立权威。
📍 段落二：核心资质（5–18秒）
| 图片 | 画面内容 | 字幕 |
|---|
| 图3 | 招牌（Sign） | |
| 图4 | 徐院长（Doctor） | 韩国仅 2% 红标皮肤科认证 |
| 图5 | 入口（Entrance） | 徐院长 全程亲自面诊施术 |
| 图6 | 等候区（Waiting） | 双手同步操作，全程 无隐形推销 |
| 图7 | Ulthera 认证（Cert） | |
🎯 设计思路：13秒黄金信任段。用"2%"数字建立稀缺感，徐院长亲自施术打消顾虑，直击赴韩医美最大痛点。
📍 段落三：项目优势（18–25秒）
| 图片 | 画面内容 | 字幕 |
|---|
| 图8 | Ulthera 针头（Cartridges） | |
| 图9 | 面诊室（Consultation） | 正版热玛吉、600发二代超声刀 |
| 图10 | Onda 设备 | 痘印毛孔管理全覆盖，低痛感舒适度 拉满 ✨ |
🎯 设计思路：7秒展示产品力。列举具体仪器名称和参数建立专业感。
📍 段落四：收尾引流（25–30秒）
| 图片 | 画面内容 | 字幕 |
|---|
| 图11 | Ultherapy 主机 | 赴韩姐妹 优先接待 |
| 图12 | 服务台（Reception2） | 收费透明，变美放心 不踩坑～🎀 |
🎯 设计思路：5秒果断收尾。"赴韩姐妹"精准锁定目标用户，"收费透明"打消顾虑。
3技术实现全解
3.1 技术选型
| 方案 | 取舍理由 |
|---|
| 纯 HTML/CSS/JS | 零依赖、跨平台、可直接浏览器预览、无需渲染等待 |
| 视频编辑软件 | 渲染耗时，修改参数需重新导出，团队协作不便 |
| Canvas/WebGL | 过度工程，图片轮播 + CSS 动画已足够 |
3.2 核心技术栈
技术架构
├── HTML5 → 12张图片幻灯片堆叠
├── CSS3 Animation → Ken Burns 效果、字幕入场、声波动画
├── JavaScript → 时间轴控制、图片切换、进度条更新
│ ├── requestAnimationFrame → 主循环 tick
│ └── Web Speech API → 浏览器原生 TTS 口播
├── Python HTTP Server → 本地预览（端口8899）
└── PNG 图片 → 12 张素材
3.3 图片轮播机制
每张图片分配时长：30000ms ÷ 12 = 2500ms/张
const slideIdx = Math.min(
Math.floor(elapsed / EACH_IMG_DURATION),
IMAGE_COUNT - 1
);
if (slideIdx !== currentSlide) showSlide(slideIdx);
3.4 Ken Burns 动效设计
| CSS 规则 | 效果 | 适用图片 |
|---|
kb-zoom-in | 从 scale(1) → scale(1.12) | 默认所有 |
kb-pan-left | 放大后向左微移 | 偶数图 |
kb-zoom-out | 从 scale(1.12) → scale(1) | 3的倍数 |
kb-pan-right | 放大后向右微移 | 4n+1 |
3.5 口播与交互
| 交互 | 实现方式 |
|---|
| 点击画面暂停/继续 | videoWrap.click 事件 |
| 声音开关 | toggleSound() |
| 重播 | replayVideo() |
| 进度条 | 4段 prog-fill 实时更新 |
| 底部控制栏 | 播放/暂停、时间、拖动进度、音量、全屏 |
4操作流程
Step 1: 接收素材
用户 → 粘贴 12 张图片到聊天窗口
AI → 自动下载到工作目录 + 创建 alive-video/images/
Step 2: 需求分析
用户: 参考链接 + 4段字幕文字 + 30秒时长
AI拆解: 12张图×2.5秒, 4段字幕 5s/13s/7s/5s
Step 3: 搭建 HTML 页面
phone-shell → video-wrap → {进度条,Logo,声音开关,幻灯片×12,字幕区,控制栏,结束画面}
Step 4: 时间轴主循环
requestAnimationFrame(tick) → 计算elapsed → 更新图片/字幕/进度条
Step 5: 加入口播
字幕切换 → speakText()（Web Speech API 中文女声）
Step 6: 导出独立文件
base64嵌入所有图片 → 单HTML文件 → 双击即用