一、项目概述
1.1 制作目标
为韩国首尔 Alive 皮肤科（반포 본점）制作一条 30 秒品牌推广短视频，用于 Threads、抖音、小红书等社交平台分发。目标受众为台湾/香港赴韩医美顾客。
1.2 核心需求拆解
| 维度 | 需求 |
|---|
| 素材 | 用户提供 12 张皮肤科实拍图片 |
| 时长 | 严格 30 秒 |
| 格式 | 9:16 竖屏，模拟手机观看体验 |
| 字幕 | 4 段分段字幕，按时间轴切换 |
| 口播 | Web Speech API 中文女声朗读 |
| 动效 | Ken Burns 镜头运动效果 |
| 交互 | 点击暂停/继续、静音开关、重播 |
二、剪辑分镜脚本
2.1 时间轴规划
0s ────────── 5s ───────────────────── 18s ────────── 25s ── 30s
│ 开场钩子 │ 核心资质/信任 │ 项目优势 │ 收尾引流 │
│ (2张图) │ (5张图) │ (3张图) │ (2张图) │
└──────────────┴───────────────────────┴──────────────┴──────────┘
2.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秒展示产品力。列举具体仪器名称和参数（600发）建立专业感，用"舒适度拉满"的年轻化用语贴近短视频受众。
📍 段落四：收尾引流（25–30秒）
| 图片 | 画面内容 | 字幕 |
|---|
| 图11 | Ultherapy 主机 | 赴韩姐妹 优先接待 |
| 图12 | 服务台（Reception2） | 收费透明，变美放心 不踩坑～🎀 |
🎯 设计思路：5秒果断收尾。"赴韩姐妹"精准锁定目标用户，"收费透明"再次打消顾虑，"不踩坑"作为终极钩子留下行动意愿。
三、技术实现全解
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); // opacity 0→1 crossfade 0.7s
}
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 实时更新 |
| 底部控制栏 | 播放/暂停、时间、拖动进度、音量、全屏 |
四、操作流程
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文件 → 双击即用，无需服务器
五、可复用性与定制指南
用同样模板制作其他皮肤科视频，只需修改：
| 修改点 | 位置 | 说明 |
|---|
| 图片 | images/ | 替换并更新 img src |
| 图片数量 | const IMAGE_COUNT | 非12张时修改 |
| 字幕文字 | .caption-main | 4段内容 |
| 口播文字 | const SPEECH_TEXTS | 与字幕对应 |
| 时间段 | const CAPTION_SEGMENTS | 格式 {start, end, id} |
| 品牌名 | .logo-text, .end-logo | 替换品牌 |
| 总时长 | const TOTAL_DURATION | 毫秒 |
| 主题色/语速 | CSS变量 / utter.rate | 可选调整 |
六、技术亮点总结
| 亮点 | 说明 |
|---|
| 🎯 零渲染时间 | 改代码→刷新浏览器→即刻预览 |
| 🎨 4种Ken Burns | 每张图不同的镜头运动 |
| 🔊 AI原生口播 | 浏览器内置TTS，零成本 |
| 📱 手机外壳模拟 | 48px圆角+渐变阴影 |
| ⏱ 分段进度条 | 4段独立，直观显示播放进度 |
| 🎬 跨平台兼容 | 纯Web技术，全设备可用 |
可选优化方向
- AI TTS 升级：腾讯云语音合成替代浏览器发音
- 背景音乐：版权免费BGM + 混音控制
- 视频导出：MediaRecorder + Canvas → MP4
- 模板化：JSON驱动内容生成
- 数据分析：播放完成率、重播埋点