上传视频后在此预览滚动效果Preview the scroll effect here after uploading
支持 MP4，超限自动转码MP4 supported · auto-transcode if exceeded上传视频后在此预览滚动效果Preview the scroll effect here after uploading
支持 MP4，超限自动转码MP4 supported · auto-transcode if exceeded仅支持 MP4 格式，时长 ≤15 秒，建议分辨率 ≤1080p。MP4 only, ≤15s, recommended ≤1080p.
当视频超过 1080p（1920×1080）宽/高或大于 50MB 时，工具会在浏览器内自动转码为 1080p 内 + 全关键帧格式，无需手动处理。Over 1080p or 50MB? Auto-transcodes in-browser to 1080p + all-keyframe.
Speed（速度） 表示「用几屏的滚动距离播完整个视频」。值越大滚动越细腻，值越小滚动越灵敏。Screens of scroll to play the full clip. Higher = smoother; lower = more responsive.
留空则生成的代码默认引用同级目录的 video.mp4；填写公网链接则使用该地址（需支持 HTTP Range 字节请求）。Blank = sibling video.mp4; fill a public URL (must support Range requests).
点击按钮下载 zip 包（内含 HTML + CSS + JS + 视频），解压到任意静态服务器即可直接使用。Download zip (HTML/CSS/JS + video), unzip to any static host.
| 参数 · Parameter | 默认值 Default | 可选范围 / 说明 Range / Description | 示例 · Example |
|---|---|---|---|
screens滚动屏数 |
5 |
1 – 10，步长 0.5值越大越平滑，推荐 3–7 |
screens = 5→ 滚动 5 屏播完全片 |
videoSrc视频地址 |
"video.mp4" |
相对路径或绝对 URL 必须支持 Range 请求 |
"https://cdn.example.com/hero.mp4" |
scrub播放模式 |
0（拖动播放） |
0 = 仅拖动时播放1 = 自动循环播放 |
scrub: 0← 默认，滚动驱动 |
container挂载容器 |
"#video-wrapper" |
CSS 选择器字符串 页面中需存在该元素 |
".my-hero-section" |
videoProps视频属性 |
{ muted:true, |
HTMLVideoElement 属性 常用：muted / playsinline / loop |
{ muted:true, loop:true }静音+循环 |
height容器高度 |
"100vh" |
CSS 高度值 嵌套在导航栏内用 calc(100vh - XXpx) |
"calc(100vh - 64px)"减去顶栏高度 |
objectFit适配模式 |
"contain" |
"contain" 完整显示"cover" 覆盖填充"fill" 拉伸填满 |
objectFit: "cover"裁切填满无黑边 |
easing缓动函数 |
"none" |
"none" 线性"power2.out" 等 GSAP 缓动名 |
easing: "power2.out"起停更柔和 |
start / end触发区间 |
"top top" / |
ScrollTrigger 位置语法 格式： "元素 视口" |
start: "top 80%"进入 80% 才开始 |
独立全页部署，视频占满整屏。这是默认配置，无需修改任何参数。
解压后直接放到服务器根目录 访问 index.html 即可看到效果
当你的页面已有固定导航栏（如高 64px）时，需将容器高度从 100vh 改为 calc(100vh - 64px)。
#video-wrapper { height: calc(100vh - 64px); }
/* 或在 JS 中修改 containerHeight 参数 */
用于品牌展示页，视频持续循环滚动播放。将 scrub 设为 1 并给视频加 loop 属性。
videoProps: { muted: true, playsinline: true, loop: true },
scrub: 1 // 1 = autoplay mode (continuous loop)
当视频比例与容器不一致且不希望出现黑边时，改用 cover 模式（会裁切边缘）。
.hero-video { object-fit: cover; }
/* 或在 generateCode 输出中搜索 object-fit 替换 */
如果生成的效果出现模糊或卡顿，通常是因为视频缺少关键帧。推荐在上传前用 FFmpeg 预处理：
ffmpeg -i input.mp4 -movflags +faststart -g 30 \ -c:v libx264 -crf 23 -c:a copy -pix_fmt yuv420p output.mp4
+faststart — 将 moov atom 移至文件头部，浏览器无需下载完即可开始播放-g 30 — 每 30 帧一个关键帧，兼顾流畅度和文件大小-crf 23 — 质量因子，18–28 可选，越小质量越高文件越大-pix_fmt yuv420p — 保证跨浏览器兼容性ffmpeg -i input.mp4 -movflags +faststart -g 1 \ -c:v libx264 -crf 23 -c:a copy -pix_fmt yuv420p output.mp4
-g 1 — 每帧都是关键帧，滚动时逐帧精确定位，零拖影零模糊