为什么"图像先行"而不是直接生成视频

当前 AI 视频生成工具在直接文生视频时有一个共同弱点：画面细节不可控。人物长相、服装纹理、背景元素每一帧都在微妙变化，做成交互视频后来回 seek 会出现"脸部漂移""衣服变色"等诡异现象。

而图像先行的策略是：先用文生图工具生成一张高质量的静态画面，确保构图、人物、光影、风格都达到满意标准。然后以这张图作为视频生成的起点（首帧），再生成一张转身后的姿态作为终点（尾帧）。这样：

为什么用"首尾帧"而不是"图生视频"单帧驱动

很多工具支持"上传一张图，让图中内容动起来"（图生视频）。这种方式的问题是：AI 会自由发挥运动方向和幅度。你可能想要"人物从右往左转"，AI 却理解成"人物向前走一步"或"镜头推进"。

首尾帧模式（First Frame + Last Frame）相当于给 AI 两个锚点：起点姿态和终点姿态都已锁定，AI 只需要填补中间的运动过渡。这大大减少了"AI 自由发挥"的空间，让转身方向、幅度、速度都更加可控。

为什么用 HTML5 Video 而不是 GIF / Canvas 序列帧

设计哲学：少即是多

这个方案的核心设计哲学可以概括为三个"少"：

环节一：静态图像生成

这是整个工作流的起点，画面质量决定了最终效果的上限。推荐以下工具，按优先级排列：

环节二：首尾帧视频生成

将两张静态图（首帧 + 尾帧）交给 AI，让它生成中间的过渡动画。这是本方案的核心创意环节。

环节三：视频转码

AI 生成的视频不能直接用于网页，必须经过转码处理。只有一个工具是行业标准：

环节四：网页开发

本方案的网页层极其轻量，不需要框架，原生 HTML + CSS + JS 即可：

完整工具链速查表

架构图：页面里的四层

流程图：一次鼠标移动的旅程

为什么图像质量决定最终效果上限

视频生成工具在接收首帧图像后，会尽量保持图像的风格、色调、人物特征不变。如果首帧图本身模糊、构图失衡、光影混乱，那么生成的视频只会继承这些缺陷。反之，一张构图精准、光影统一、细节丰富的高质量图像，能让后续视频生成的成功率大幅提升。

图像生成的四条铁律

首帧图像提示词模板（可直接复制）

中文版（适合可灵、Midjourney 中文模式）：

一位古装侠客立于山巅岩石之上，晚霞漫天，云海翻涌于远方山谷。
固定三脚架机位，镜头完全静止，无推拉摇移。
人物位于画面右侧三分之一处，面向画面右侧，手持长剑，衣袂微扬。
天空、云彩、地面、草叶全部静止，整体构图保持不变。
电影感，史诗氛围，暖橙色调，8K 超高清，极致细节。

英文版（适合 Midjourney / Runway / Pika 等）：

A lone swordsman in flowing robes standing on a mountain peak at sunset,
sea of clouds in the valley below. Locked tripod shot, completely static
camera, no camera movement. Subject positioned on the right third of the
frame, facing right, holding a long sword, robes gently flowing.
Sky, clouds, ground and grass remain frozen. Composition unchanged.
Cinematic, epic atmosphere, warm orange tones, 8K ultra detailed.

尾帧图像提示词模板

尾帧必须与首帧保持完全一致的机位、背景、光照、服装，只有人物朝向发生变化。最简单的方法是用首帧图作为参考，修改人物姿态：

[与首帧完全相同的场景描述]，
固定三脚架机位，镜头完全静止。
人物位于画面右侧三分之一处，面向画面左侧，手持长剑，衣袂微扬。
天空、云彩、地面、草叶全部静止，整体构图保持不变。
电影感，史诗氛围，暖橙色调，8K 超高清，极致细节。

负向提示词（防止 AI 自由发挥）

camera movement, zoom, pan, dolly, walking, footsteps moving,
blowing grass, moving clouds, motion blur, flickering, morphing face,
extra limbs, scene change, cut, transition, text, watermark, signature,
low quality, blurry, deformed hands, bad anatomy

Midjourney 参数建议

首尾帧模式的工作机制

首尾帧模式（First Frame + Last Frame）的核心逻辑是：AI 以首帧为起点、尾帧为终点，生成一段连接两者的过渡视频。这类似于传统动画中的"中间帧补间"，但由 AI 自动完成。

各平台首尾帧操作指南

视频生成提示词模板（约束 AI 的运动）

即使使用了首尾帧，仍然需要提示词来约束 AI 的"补间方式"。以下是经过验证的模板：

中文版：

人物从面向右侧匀速缓慢转身到面向左侧。
只有上半身、头部和眼神转动，双脚完全不动。
机位固定，无镜头运动，无推拉摇移。
背景天空、云彩、地面、草叶完全静止不动。
整体构图保持不变，无场景切换。

英文版：

The character slowly and smoothly turns from facing right to facing left.
Only the upper body, head and gaze rotate; feet stay completely still.
Locked camera, no camera movement, no zoom, no pan.
Background sky, clouds, ground and grass remain completely frozen.
Composition unchanged, no scene transitions.

运动幅度控制：为什么建议"低"或"中"

AI 视频工具通常有一个"运动幅度"（Motion Strength）参数。本方案强烈建议设置为"低"或"中"，原因有三：

生成后检查清单

目标规格一览

一条命令完成转码

# 把 input.mp4 转成本方案可用的网页视频
ffmpeg -y -i input.mp4 \
  -c:v libx264 -pix_fmt yuv420p \
  -crf 18 -preset medium \
  -g 5 -keyint_min 5 -sc_threshold 0 -bf 0 \
  -movflags +faststart \
  -an \
  output.mp4

关键帧：本方案最大的隐形坑

视频 seek（跳转）时，浏览器只能精确落到关键帧，普通帧需要从最近的关键帧逐帧推算。AI 生成的视频往往整个文件只有 1 个关键帧——这意味着每次 seek 都要从第 0 帧算到目标帧，鼠标一动就卡成 PPT。

参数逐行解读

进阶：多分辨率输出

如果你的网站需要同时服务桌面端和移动端，可以一次转码出多个版本：

# 1080p 桌面版
ffmpeg -y -i input.mp4 -c:v libx264 -pix_fmt yuv420p -crf 18 -preset medium \
  -g 5 -keyint_min 5 -sc_threshold 0 -bf 0 -movflags +faststart -an \
  -vf "scale=1920:1080:flags=lanczos" output-1080p.mp4

# 720p 移动版
ffmpeg -y -i input.mp4 -c:v libx264 -pix_fmt yuv420p -crf 20 -preset medium \
  -g 5 -keyint_min 5 -sc_threshold 0 -bf 0 -movflags +faststart -an \
  -vf "scale=1280:720:flags=lanczos" output-720p.mp4

第一步：HTML 视频标签

<video id="heroVideo"
       muted            // 静音（自动播放策略 & 用户体验双重要求）
       playsinline      // iOS Safari 必须，否则强制全屏播放
       preload="auto"   // 提前缓冲，鼠标一动就能响应
       src="turn.mp4">
</video>
// 注意：不写 autoplay！我们不需要它播放。

第二步：鼠标坐标 → 目标时间

let targetTime = 0;   // 鼠标想去的时间点
let smoothTime = 0;   // 平滑后的实际渲染时间

window.addEventListener("mousemove", (e) => {
  if (!video.duration) return;
  // 鼠标 X 占比 0~1，映射到整条时间轴；方向反了就写 1 - ratio
  const ratio = 1 - e.clientX / window.innerWidth;
  targetTime = Math.max(0, Math.min(video.duration, ratio * video.duration));
}, { passive: true });

第三步：平滑引擎（灵魂代码）

let seeking = false;
const SEEK_EPS = 1 / 48;  // 小于半帧不动，防空转

function tick() {
  // ① 指数平滑：每帧向目标靠近 14%，快而不冲，无机械感
  smoothTime += (targetTime - smoothTime) * 0.14;

  // ② 串行 seek：上一个没完成就不发下一个
  if (!seeking && Math.abs(smoothTime - video.currentTime) > SEEK_EPS) {
    seeking = true;
    video.currentTime = smoothTime;
  }
  requestAnimationFrame(tick);
}

// ③ seek 完成放行；期间目标变了，下一帧自动追赶最新值
video.addEventListener("seeked", () => seeking = false);
requestAnimationFrame(tick);

第四步：加载进度条

// 监听真实缓冲进度
video.addEventListener("progress", () => {
  if (video.buffered.length && video.duration) {
    real = video.buffered.end(video.buffered.length - 1) / video.duration;
  }
});
// 展示进度平滑追赶真实进度，到 100% 隐藏加载层
shown += (real - shown) * 0.12;
barFill.style.width = Math.round(shown * 100) + "%";

完整 HTML 骨架（可直接保存运行）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态视频背景</title>
<style>
  *{margin:0;padding:0;box-sizing:border-box}
  body{height:100vh;overflow:hidden;background:#000}
  video{position:fixed;inset:0;width:100%;height:100%;object-fit:cover}
  .ui{position:relative;z-index:10;color:#fff;padding:60px;font-family:sans-serif}
  .load{position:fixed;inset:0;background:#000;z-index:100;display:grid;
        place-items:center;color:#fff;transition:opacity .6s}
  .load.done{opacity:0;pointer-events:none}
  .bar{width:200px;height:3px;background:#333;border-radius:2px;overflow:hidden}
  .bar div{height:100%;background:#fca311;width:0%;transition:width .1s}
</style>
</head>
<body>
<div class="load" id="loader">
  <div><div class="bar"><div id="bar"></div></div><p style="margin-top:12px;font-size:12px">加载中...</p></div>
</div>
<video id="v" muted playsinline preload="auto" src="turn.mp4"></video>
<div class="ui"><h1>移动鼠标体验交互</h1></div>
<script>
const video = document.getElementById('v');
const bar = document.getElementById('bar'');
const loader = document.getElementById('loader');
let targetTime=0, smoothTime=0, seeking=false, real=0, shown=0;
const EPS=1/48;

video.pause();
window.addEventListener('mousemove',e=>{
  if(!video.duration)return;
  targetTime = (1-e.clientX/window.innerWidth)*video.duration;
  targetTime = Math.max(0,Math.min(video.duration,targetTime));
},{passive:true});

function tick(){
  smoothTime += (targetTime-smoothTime)*0.14;
  if(!seeking && Math.abs(smoothTime-video.currentTime)>EPS){
    seeking=true; video.currentTime=smoothTime;
  }
  requestAnimationFrame(tick);
}
video.addEventListener('seeked',()=>seeking=false);
requestAnimationFrame(tick);

video.addEventListener('progress',()=>{
  if(video.buffered.length&&video.duration)
    real=video.buffered.end(video.buffered.length-1)/video.duration;
});
function loadLoop(){
  shown+=(real-shown)*0.12;
  bar.style.width=Math.round(shown*100)+'%';
  if(shown>0.98) loader.classList.add('done');
  else requestAnimationFrame(loadLoop);
}
requestAnimationFrame(loadLoop);
</script>
</body>
</html>

为什么这样就"丝滑"了

桌面端：cover 铺满 + 安全区构图

桌面用 object-fit: cover 让视频铺满全屏，多余部分裁掉。裁切不可避免，所以构图时就要留安全区：

移动端：三个必须处理的差异

移动端交互代码

// 同时支持鼠标和触摸
function handleInput(x) {
  if (!video.duration) return;
  const ratio = 1 - x / window.innerWidth;
  targetTime = Math.max(0, Math.min(video.duration, ratio * video.duration));
}

window.addEventListener("mousemove", e => handleInput(e.clientX), { passive: true });
window.addEventListener("touchmove", e => {
  handleInput(e.touches[0].clientX);
}, { passive: true });

// iOS 全屏拦截（双重保险）
video.setAttribute("playsinline", "true");
video.setAttribute("webkit-playsinline", "true");
video.setAttribute("x5-playsinline", "true"); // 微信内置浏览器

响应式视频源切换

<video id="heroVideo" muted playsinline preload="auto">
  <source media="(max-width: 768px)" src="turn-720p.mp4" type="video/mp4">
  <source src="turn-1080p.mp4" type="video/mp4">
</video>

// 或者用 JS 动态切换（更灵活）
const src = window.innerWidth < 768
  ? "turn-720p.mp4"
  : "turn-1080p.mp4";
video.src = src;

比例兜底：不想裁切时

如果画面一像素都不想被裁（例如客户提供的成品图），可以放弃 cover，改用原比例完整呈现 + 模糊延展填充：中间是严格原始比例的画面，四周空隙用同一张图的放大模糊版填满，视觉连续无黑边。

最终上线效果（高清静态帧）

转身过程三态

关键指标

Skill 设计目标

一个优秀的 Skill 应该满足三个条件：零依赖（不依赖 jQuery/React/Vue）、即插即用（复制粘贴就能跑）、可配置（通过参数调整行为而不改源码）。

Skill 完整代码

/**\n * VideoScrubSkill - 鼠标/触摸驱动视频时间轴\n * @param {HTMLVideoElement} video - video 元素\n * @param {Object} opts - 配置项\n */\nclass VideoScrubSkill {\n  constructor(video, opts = {}) {\n    this.video = video;\n    this.opts = {\n      smooth: opts.smooth ?? 0.14,       // 插值系数 (0~1)，越大越跟手\n      reverse: opts.reverse ?? false,  // 是否反转方向\n      eps: opts.eps ?? 1 / 48,           // 半帧阈值\n      touch: opts.touch ?? true,       // 是否启用触摸\n      ...opts\n    };\n    this.targetTime = 0;\n    this.smoothTime = 0;\n    this.seeking = false;\n    this.boundTick = this.tick.bind(this);\n    this.boundSeeked = () => this.seeking = false;\n    this.init();\n  }\n\n  init() {\n    this.video.pause();\n    this.video.muted = true;\n    this.video.setAttribute('playsinline', 'true');\n    this.video.setAttribute('webkit-playsinline', 'true');\n\n    window.addEventListener('mousemove', e => this.handleInput(e.clientX), { passive: true });\n    if (this.opts.touch) {\n      window.addEventListener('touchmove', e => this.handleInput(e.touches[0].clientX), { passive: true });\n    }\n    this.video.addEventListener('seeked', this.boundSeeked);\n    requestAnimationFrame(this.boundTick);\n  }\n\n  handleInput(x) {\n    if (!this.video.duration) return;\n    let ratio = x / window.innerWidth;\n    if (this.opts.reverse) ratio = 1 - ratio;\n    this.targetTime = Math.max(0, Math.min(this.video.duration, ratio * this.video.duration));\n  }\n\n  tick() {\n    this.smoothTime += (this.targetTime - this.smoothTime) * this.opts.smooth;\n    if (!this.seeking && Math.abs(this.smoothTime - this.video.currentTime) > this.opts.eps) {\n      this.seeking = true;\n      this.video.currentTime = this.smoothTime;\n    }\n    requestAnimationFrame(this.boundTick);\n  }\n\n  destroy() {\n    window.removeEventListener('mousemove', this.handleInput);\n    window.removeEventListener('touchmove', this.handleInput);\n    this.video.removeEventListener('seeked', this.boundSeeked);\n  }\n}\n\n// 使用方式：一行代码初始化\nconst skill = new VideoScrubSkill(document.getElementById('heroVideo'), {\n  smooth: 0.14,\n  reverse: true,   // 如果方向反了，设为 true\n  touch: true\n});

Skill 配置项速查

加载进度条 Skill（附加组件）

class VideoLoadSkill {\n  constructor(video, barEl, doneCb) {\n    this.video = video;\n    this.bar = barEl;\n    this.doneCb = doneCb;\n    this.real = 0;\n    this.shown = 0;\n    this.video.addEventListener('progress', () => {\n      if (video.buffered.length && video.duration)\n        this.real = video.buffered.end(video.buffered.length - 1) / video.duration;\n    });\n    this.loop();\n  }\n  loop() {\n    this.shown += (this.real - this.shown) * 0.12;\n    this.bar.style.width = Math.round(this.shown * 100) + '%';\n    if (this.shown > 0.98) { this.doneCb && this.doneCb(); }\n    else requestAnimationFrame(() => this.loop());\n  }\n}